如何在 HTML 表格中获取 TD 的值?
IE
| 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。
如何在 HTML 表格中获取 TD 的值?
IE
| 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。
您可以将 event.target.innerText 用于 javascript,将 $(event.target).text() 用于 jQuery,jQuery 是首选解决方案,因为它可以处理跨浏览器的兼容性。
仅使用 javascript
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
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
})
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);
*/
}
}
希望这可以帮助你。它包含跨浏览器脚本。
<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>
使用jquery会很容易..
$("#tableId").find("td").click(function(event){
var listOfCell=$(this).siblings();
for(i=0;i<listOfCell.length;i++){
alert($(listOfCell[i]).text());
}
});