JavaScript获取表格（table）当前行的值、删除行、增加行
更新时间：2015年07月03日 10:25:46 投稿：junjie
这篇文章主要介绍了JavaScript获取表格（table）当前行的值、删除行、增加行,本文直接给出代码示例,需要的朋友可以参考下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js获取 table当前行的值</title>
<script language=javascript>
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>
</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>
</body>
</html>
相关文章
这篇文章主要给大家介绍了关于微信小程序实现modal弹出框遮罩层组件（可带文本框）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要为大家介绍了JavaScript 算法 复写0双指针解法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了JSON是什么？有哪些优点？JSON和XML的区别？下面就来详细的介绍两种的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。这篇文章主要介绍了Javascript基础知识盲点总结之函数的相关资料2016-05-05
js关闭浏览器窗口，不弹出提示框。支持ie6+，火狐，谷歌等浏览器，下面以一个示例为大家详细介绍下具体的实现方法，感兴趣的朋友可以参考下2013-09-09
作用域是指程序源代码中定义变量的区域,作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限,这篇文章主要给大家介绍了关于JavaScript静态作用域和动态作用域的相关资料,需要的朋友可以参考下2021-10-10
本篇文章主要介绍了谈谈第三方App接入微信登录 解读 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。2016-12-12
这篇文章主要介绍了CORS与预检请求，CORS是一套规范，指导浏览器和服务器之间如何进行跨域资源共享，当发送跨域请求时，浏览器会先发送一个OPTIONS方法的预检请求。文中介绍的非常详细，需要的同学可以参考一下2023-04-04
这篇文章主要为大家详细介绍了js实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了file控件选择上传文件确定后触发了什么js事件,需要的朋友可以参考下2014-03-03
最新评论