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

来源：互联网发布：淘宝客api开发编辑：程序博客网时间：2024/05/16 02:48

<!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>

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 />

</tr>

</tr>

</tr>

</table>

</body>
</html>