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

【问题标题】：Get HTML table cells values in a rows by clicking on it通过单击获取行中的 HTML 表格单元格值
【发布时间】：2012-12-12 16:11:35
【问题描述】：

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

即

| 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。

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

您可以将 event.target.innerText 用于 javascript，将 $(event.target).text() 用于 jQuery，jQuery 是首选解决方案，因为它可以处理 cross browser competibilities。

仅使用 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
})

【讨论】：

他说他想用javascript而不是jquery。
谢谢@rjokelai，他有 jQuery 标签，我错过了那部分问题。我也更新了 javascript。
谢谢，但我的意思是选择整行，而不仅仅是单元格值，有什么解决方案吗？
是的，谢谢！现在，如何将行值传递给 php 变量？
您需要提交表单或发送 ajax 调用。

【解决方案2】：

希望这对您有所帮助。它包含跨浏览器脚本。

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

【讨论】：

【解决方案3】：

jquery 的使用会很容易..

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

【讨论】：

【解决方案4】：

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

【讨论】：