通过单击获取行表格中的HTML表格单元格值

即

| ID | cell 1 | cell 2 | 
| 1 | aaaa | a2a2a2 | 
| 2 | bbbb | b2b2b2 | 
| 3 | cccc | c2c2c2 |

所以，现在如果我点击单元格值： “BBBB” 我想选择的行中的所有值：

$id='2'; $cell_1='bbbb'; $cell_2='b2b2b2';

注：我会喜欢使用JavaScript而不是jQuery。

来源

2012-12-27 Luke

对于javascript，您可以使用event.target.innerText，对于jQuery可以使用$（event.target）.text（），因为jQuery处理cross browser competibilities，所以jQuery是首选解决方案。

使用只有JavaScript

Live Demo

的Html

<table id="tableID" onclick="myFun(event)" border="1"> 
    <tr> 
    <td>row 1, cell 1</td> 
    <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
    <td>row 2, cell 1</td> 
    <td>row 2, cell 2</td> 
    </tr> 
</table>

的Javascript

function myFun(e){ 
    alert(e.target.innerText); //current cell 
    alert(e.target.parentNode.innerText); //Current row. 
}

使用jQuery

Live Demo

的Html

<table id="tableID" border="1"> 
    <tr> 
     <td>row 1, cell 1</td> 
     <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
     <td>row 2, cell 1</td> 
     <td>row 2, cell 2</td> 
    </tr> 
</table>

的Javascript

$('#tableID').click(function(e){ 
    alert($(e.target).text()); // using jQuery 
})

来源

2012-12-27 08:50:05 Adil

他说他想使用JavaScript而不是jQuery。 – RJo

谢谢@rjokelai，他有jQuery标记，我错过了那部分问题。我也更新了JavaScript。 – Adil

谢谢你，但我的意思是选择整个行不只是单元格的价值，任何解决方案？ – Luke

var table = document.getElementById('tableID'), 
    cells = table.getElementsByTagName('td'); 

for (var i=0,len=cells.length; i<len; i++){ 
    cells[i].onclick = function(){ 
     console.log(this.innerHTML); 
     /* if you know it's going to be numeric: 
     console.log(parseInt(this.innerHTML),10); 
     */ 
    } 
}

from here

来源

2012-12-27 08:54:08

使用jQuery的会很容易..

$("#tableId").find("td").click(function(event){ 
    var listOfCell=$(this).siblings(); 
    for(i=0;i<listOfCell.length;i++){ 
    alert($(listOfCell[i]).text()); 
} 
});

来源

2012-12-27 08:54:22 Rajesh

希望这可以帮助你。它包含跨浏览器脚本。

<html> 
    <head> 
    <script type="text/javascript"> 
    function myFun(e){ 
    if(!e.target) 
     alert(e.srcElement.innerHTML); 
    else 
     alert(e.target.innerHTML); 
    } 
    </script> 
    </head> 
    <body> 
    <table id="tableID" onclick="myFun(event)" border="1"> 
    <tr> 
    <td>row 1, cell 1</td> 
    <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
    <td>row 2, cell 1</td> 
    <td>row 2, cell 2</td> 
    </tr> 
    </table> 
    </body> 
    </html>

来源

2012-12-28 09:41:01 AmGates

谢谢，这是非常有用的 – Luke

通过单击获取行表格中的HTML表格单元格值

回答

相关问题