php – 通过点击它来获取HTML表格单元格的值

发布时间：2020-12-13 16:37:10 所属栏目：PHP教程来源：网络整理

导读：如何在 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'; 注意：我想使

如何在 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.

你可以使用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
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!