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

如何获取 HTML 表格中的 TD 值？

i.e.

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

所以现在如果我单击单元格值：“bbbb”我想获取所选行的所有值：

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

NOTE:我想使用 JavaScript 而不是 jQuery。

您可以将 event.target.innerText 用于 javascript，将 $(event.target).text() 用于 jQuery，jQuery 是首选解决方案，因为它可以处理跨浏览器兼容性 http://www.sitepoint.com/whats-so-good-about-jquery/.

仅使用 JavaScript

现场演示 http://jsfiddle.net/rajaadil/dREqs/1/

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

现场演示 http://jsfiddle.net/rajaadil/dREqs/2/

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
})