获取table下每一行td的值-优快云博客

本文介绍两种获取HTML表格中TD元素值的方法：一种是使用纯JavaScript实现，通过事件触发获取当前点击行的索引及首个TD值；另一种是利用jQuery简化DOM操作过程，通过each方法遍历所有行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目，需要获取每一行td的值，于是我就总结了一下获取td值的方法。分别用jquery和javascript来获取

第一种：javascript
var otable = document.getElementById("tablee");
/*
event 事件
srcElement button
parentElement 上1层td
parentElement 上1层tr
rowIndex tr的rowIndex
*/
js代码:
var tr=event.srcElement.parentElement.parentElement.rowIndex;//获取每一行的索引
var td=event.srcElement.parentElement.parentElement.cells[0].innerText;//获取tr下第一个td的值

第二种方法: jquery
就是用到jquery的each方法这种方法网上有很多在这里就不说明了，如果有不知道的可以给我留言。。

<table id="tablee">
<tr>
<td>名字</td>
<td>密码</td>
<td>性别</td>
<td> 操作</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td> <input type="button" value="删除" onClick="deleteRow()" /></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td> <input type="button" value="删除" onClick="deleteRow()" /></td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td> <input type="button" value="删除" onClick="deleteRow()" /></td>
</tr>

</table>