通过单击它获取行中的HTML表格单元格值 [英] Get HTML table cells values in a rows by clicking on it

问题描述

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

即

  | ID |单元格1 |单元格2 | 
 | 1 | aaaa | a2a2a2 | 
 | 2 | bbbb | b2b2b2 | 
 | 3 | cccc | c2c2c2 | 
  

所以现在如果我点击单元格的值：bbbb我想获得所有的值选定的行：

  $ id ='2'; $ cell_1 = BBBB; $ cell_2 = b2b2b2’ ; 
  

注意：我想使用JavaScript而不是jQuery。 / p>

解决方案

您可以将event.target.innerText用于javascript，$（event.target）.text（）用于jQuery，jQuery是因为它可以处理跨浏览器竞争力。

仅使用javascript

现场演示 / p>

 < table id =tableIDonclick =myFun（event）border =1> 
< tr> 
< td>第1行，第1单元< / td> 
< td>第1行，第2单元< / td> 
< / tr> 
< tr> 
< td>第2行，第1单元< / td> 
< td>第2行，第2单元< / td> 
< / tr> 
  
  

Javascript

  function myFun（e）{
 alert（e.target.innerText）; //当前单元格
 alert（e.target.parentNode.innerText）; //当前行。 
 
  

使用jQuery

实时演示

Html

 <表ID =tableIDborder =1> 
< tr> 
< td>第1行，第1单元< / td> 
< td>第1行，第2单元< / td> 
< / tr> 
< tr> 
< td>第2行，第1单元< / td> 
< td>第2行，第2单元< / td> 
< / tr> 
  
  

Javascript

$ b $

  $（'＃tableID'）。click（function（e）{
 alert（$（e.target）.text （））; //使用jQuery 
}）
  

How can I get values of TDs inside an HTML table?

i.e.

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

So now if I click on the cell value: "bbbb" I want to get all the values of selected row:

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

NOTE: I'd like to use JavaScript and not jQuery.

解决方案

You can use event.target.innerText for javascript and $(event.target).text() for jQuery, jQuery is preferred solution as it handles cross browser competibilities.

Using only 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.
}​

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

这篇关于通过单击它获取行中的HTML表格单元格值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！