您的位置：首页 > 产品设计 > UI/UE

点击checkbox使用js取table中tr下td中的各个标签value

2013-05-29 13:28 489 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Js获取 table当前行的值</title>

<script type="text/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) {//如果当前选中行为null的话

var str = selectedTr.cells[1].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("请选择一行");

}

}

//点击table中tr下td中的checkbox标签取到td中不同的标签的写法(备注：一个td中添加一个标签)

function checkTr(e) {

if (e.checked) {

//alert(e.parent);

var myInput = document.getElementById("td12"); //拿到td标签中的input标签

//alert(tds.parentNode.id);//输出包裹input标签的td标签的id属性

//alert(tds.parentNode.parentNode.id); //输出当前td标签的上一级td标签的id属性

alert(myInput.parentNode.parentNode.cells[0].childNodes[0].value); //cell的下标是针对tr下不同的td位置决定的

alert(myInput.parentNode.parentNode.cells[1].childNodes[0].value);

alert(myInput.parentNode.parentNode.cells[2].childNodes[0].value);

}

else {

alert("没选中");

}

}

</script>

</head>

<body>

单击选中Tr，高亮显示，再单击取消选选中。

<input type="button" value="选中的是哪一行？" onclick="check()"/>

<input type="button" value="删除选中行" onclick="del()"/>

<input type="button" value="增加一行" onclick="add()"/>

<br />

<input type="button" value="显示数据" />

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">

<tr bgcolor="#cccccc" id="tr1">

<td ><input type="text" value="11"/>　</td>

<td id="test"><input type="text" id="td12" value="12"/> <input type="text" id="Text1" value="121"/> </td>

<td><input type="checkbox" onclick="checkTr(this)" value="13" /> </td>

</tr>

<tr onclick="c1(this);" bgcolor="#e0e0e0" id="tr2">

<td id="td2"><input type="text" value="21"/>　</td>

<td><input type="text" value="22"/></td>

<td><input type="checkbox" onclick="check()" /> </td>

</tr>

<tr onclick="c1(this);" bgcolor="#cccccc" id="tr3">

<td ><input type="text" value="31"/></td>

<td><input type="text" value="32"/> </td>

<td><input type="checkbox" onclick="check()" /> </td>

</tr>

<tr bgcolor="#e0e0e0" id="tr4">

<td >

<input type="text" value="41"/>　

</td>

<td>

<input type="text" value="42"/>

</td>

<td><input type="checkbox" onclick="check()" /> </td>

</tr>

<tr onclick="c1(this);" bgcolor="#cccccc" id="tr5">

<td >

<input type="text" value="51"/>　

</td>

<td >

<input type="text" value="52"/>　

</td>

<td><input type="checkbox" onclick="check()" /> </td>

</tr>

</table>

<label id="lab"></label>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航