<!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>
<title></title>
</head>
<body>
</body>
</html>-->
<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="选中的是哪一行?" οnclick="check()"/>
<input type="button" value="删除选中行" οnclick="del()"/>
<input type="button" value="增加一行" οnclick="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" οnclick="checkTr(this)" value="13" /> </td>
</tr>
<tr οnclick="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" οnclick="check()" /> </td>
</tr>
<tr οnclick="c1(this);" bgcolor="#cccccc" id="tr3">
<td ><input type="text" value="31"/></td>
<td><input type="text" value="32"/> </td>
<td><input type="checkbox" οnclick="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" οnclick="check()" /> </td>
</tr>
<tr οnclick="c1(this);" bgcolor="#cccccc" id="tr5">
<td >
<input type="text" value="51"/>
</td>
<td >
<input type="text" value="52"/>
</td>
<td><input type="checkbox" οnclick="check()" /> </td>
</tr>
</table>
<label id="lab"></label>
</body>
</html>