Js获取table当前tr行的值的代码_软件编程_内江振祥营销策划有限公司

Js获取table当前tr行的值的代码

发布时间：2026-01-11

点击量：

下面的代码主要是学习控制表格里面的一些操作，代码都是直接写在表格里面的，大家可以改成事件绑定的。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Js获取 table当前行的值</title>  var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==obj) selectedTr=null;//加上此句，以控制点击变白，再点击反灰 else selectedTr=obj; } /*得到选中行的第一列的值*/ function check(){ if(selectedTr!=null){ var str=selectedTr.cells[0].childNodes[0].value; document.getElementById("lab").innerHTML=str; } else{ alert("请选择一行"); } } /*删除选中行*/ function del(){ if(selectedTr!=null){ if(confirm("确定要删除吗?")){ alert(selectedTr.cells[0].childNodes[0].value); var tbody=selectedTr.parentNode; tbody.removeChild(selectedTr); } } else{ alert("请选择一行"); } } </script> <script type="text/javascript" src="/public/static/common/js/ey_global.js?v=v1.7.1"></script>
</head> <body> 单击选中Tr，高亮显示，再单击取消选选中。<input type=button value="选中的是哪一行？" onclick="check()"> <input type=button value="删除选中行" onclick="del()"> <input type=button value="增加一行" onclick="add()"> <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> <tr onclick="c1(this);" bgcolor="#cccccc"> <td ><input type="text" value="11">　</td> <td><input type="text" value="12"></td> </tr> <tr onclick="c1(this);" bgcolor="#e0e0e0"> <td ><input type="text" value="21">　</td> <td><input type="text" value="22"></td> </tr> <tr onclick="c1(this);" bgcolor="#cccccc"> <td ><input type="text" value="31">　</td> <td><input type="text" value="32"></td> </tr> <tr onclick="c1(this);" bgcolor="#e0e0e0"> <td ><input type="text" value="41">　</td> <td><input type="text" value="42"></td> </tr> <tr onclick="c1(this);" bgcolor="#cccccc"> <td ><input type="text" value="51">　</td> <td ><input type="text" value="52">　</td> </tr> </table> <label id="lab"></label> <script type="text/javascript">var root_dir="";var ey_aid=470551;</script>
<script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?v=v1.7.1"></script>
</body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

标签：# null # 都是 # 写在 # 绑定 # 点到 # 全选 # 主要是 # 再点 # 变白 # 的是 # function # obj # javascript # language # var # script # selectedTr # style # JavaScript获取table中某一列的值的方法 # tr # td # input # JS表格组件神器bootstrap table详解（基础版） # JS组件Bootstrap Table使用方法详解 # JS获取Table中td值的方法 # JS动态添加Table的TR # TD实现方法 # table # Sortable.js拖拽排序使用方法解析 # JS实现动态生成html table表格的方法分析 # js操作table示例(个人心得) # js实现table添加行tr、删除行tr、清空行tr的简单实例 # JavaScript操作table表格：遍历、列读取、删除行、更新列等动态管理 # 请选择 # 单击

上一篇：javascript 翻页测试页(动态创建标签并自动翻页)

下一篇：IE 上下滚动展示模仿Marquee机制

Js获取table当前tr行的值的代码

发布时间：2026-01-11

点击量：

返回

4008888355