问答详情
源自：9-22 编程练习

请问一下，不能删除，帮忙解释并给予正确方法，谢谢！

<!DOCTYPE html>

<html>


<head>

<meta charset="utf-8">

<title></title>

<style>

/*tr:hover{background:#777;}*/

a{text-decoration:none;}

table,td{

border:1px solid goldenrod;

text-align:center;

}

th{

background-color:sandybrown;

}

table{

margin:15px 0;

width:500px;

height:150px;

}

th,td{

height:30px;

}

button{border:0 yellow none;height:35px;width:100px;font-size:14px;font-weight:bold;}

</style>

<script>

//鼠标滑入滑出事件，获取行

function tabl(){

var trline=document.getElementsByTagName("tr");

for (var i=1; i<trline.length;i++)

{

trline[i].onmouseover=function(){

//通过for循环遍历使每一个trline[i].onmouseover的都有这个function方法，

//this表示把style样式传递给function()，并赋值给trline[i].onmouseover;

this.style.backgroundColor="#f2f2f2";

}

trline[i].onmouseout=function() {

this.style.backgroundColor="#fff";

}

}

}

//添加行

// var itable=document.getElementsByTagName("table");

// 这里是数组，应该加入访问数组内的下标，如：[0]（表示读取第一个节点）或使用.lastChild（最后一个节点）


function addtr(){

var tablein=document.getElementById("table");

var newtr=document.createElement("tr");

var newtd=document.createElement("td");

var alink=document.createElement("a");

alink.setAttribute("href","javascript:deleteRow()");

alink.innerHTML="del";

newtd.appendChild(alink);

for (var x=1;x<5;x++){

newtr.appendChild(document.createElement("td"));

}; //添加  “4个”  空白单元格

newtr.appendChild(newtd); //添加以上的第5个 “alink链接与内容” 单元格

tablein.appendChild(newtr);

tabl();

}

//同样td方法,为每一个alink加入链接

var a_btn=document.getElementsByTagName("a");

for (var i=0;i<a_btn.length;i++){

a_btn[i].setAttribute("href","deleteRow(this)");

}


//删除行

function deleteRow(obj){    

var getNode = document.getElementById('table');    

var deltr = obj.parentNode.parentNode;    

getNode.removeChild(deltr);    

} 

//删除对应

//全部删除

//删除指定

//删除选中

</script>

</head>


<body>

<!--<div>-->

<table id="table">

<tr>

<th>工号</th>

<th>姓名</th>

<th>职务</th>

<th>工资</th>

<th>操作</th>

</tr>

<tr>

<td>138</td>

<td>alex</td>

<<td>iway</td>

<td>12</td>

<td><a href="javascript:">del</a></td>

</tr>

<tr>

<td>4405</td>

<td>hong</td>

<<td>hr</td>

<td>12</td>

<td><a href="javascript:">del</a></td>

</tr>

<<tr>

<td>123</td>

<td>wang</td>

<td>it</td>

<td>12</td>

<td><a href="javascript:">del</a></td>

</tr>


</table>

<button onclick="javascript:addtr();">添加一行</button>

<!--</div>-->

</body>


</html>


提问者：DeepNet 2015-11-05 21:22

个回答

  • 李晓健
    2015-11-05 21:50:54
    已采纳 

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /*tr:hover{background:#777;}*/
        a{text-decoration:none;}
        table,td{
            border:1px solid goldenrod;
            text-align:center;
        }
        th{
            background-color:sandybrown;
        }
        table{
            margin:15px 0;
            width:500px;
            height:150px;
        }
        th,td{
            height:30px;
        }
        button{
            border:0 yellow none;height:35px;width:100px;font-size:14px;font-weight:bold;
        }
    </style>

</head>

<body>
<!--<div>-->
<table id="table">
    <tr>
        <th>工号</th>
        <th>姓名</th>
        <th>职务</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>138</td>
        <td>alex</td>
        <<td>iway</td>
        <td>12</td>
        <td><a href="javascript:;">del</a></td>
    </tr>
    <tr>
        <td>4405</td>
        <td>hong</td>
        <<td>hr</td>
        <td>12</td>
        <td><a href="javascript:;">del</a></td>
    </tr>
    <<tr>
    <td>123</td>
    <td>wang</td>
    <td>it</td>
    <td>12</td>
    <td><a href="javascript:deleteRow(this)">del</a></td>
</tr>

</table>
<button onclick="javascript:addtr();">添加一行</button>
<!--</div>-->
<script>
    //鼠标滑入滑出事件，获取行
    function tabl(){
        var trline=document.getElementsByTagName("tr");
        for (var i=1; i<trline.length;i++)
        {
            trline[i].onmouseover=function(){
//通过for循环遍历使每一个trline[i].onmouseover的都有这个function方法，
//this表示把style样式传递给function()，并赋值给trline[i].onmouseover;
                this.style.backgroundColor="#f2f2f2";
            }
            trline[i].onmouseout=function()    {
                this.style.backgroundColor="#fff";
            }
        }
    }
    //添加行
    // var itable=document.getElementsByTagName("table");
    // 这里是数组，应该加入访问数组内的下标，如：[0]（表示读取第一个节点）或使用.lastChild（最后一个节点）

    function addtr(){
        var tablein=document.getElementById("table");
        var newtr=document.createElement("tr");
        var newtd=document.createElement("td");
        var alink=document.createElement("a");
        alink.setAttribute("href","javascript:;");
        alink.innerHTML="del";
        alink.onclick = deleteRow;
        newtd.appendChild(alink);
        for (var x=1;x<5;x++){
            newtr.appendChild(document.createElement("td"));
        }; //添加  “4个”  空白单元格
        newtr.appendChild(newtd);  //添加以上的第5个 “alink链接与内容” 单元格
        tablein.appendChild(newtr);
        tabl();
    }
    //同样td方法,为每一个alink加入链接
    var a_btn=document.getElementsByTagName("a");
    for (var i=0;i<a_btn.length;i++){
        a_btn[i].setAttribute("href","javascript:;");
        a_btn[i].onclick = deleteRow;
    }

    //删除行
    function deleteRow(){
        var deltr = this.parentNode.parentNode;
        deltr.parentNode.removeChild(deltr);
    }
    //删除对应
    //全部删除
    //删除指定
    //删除选中
</script>
</body>

</html>

    主要两个问题，

    1，你把javascript代码放到上面还没有用到onReady 或 onload事件，javascript代码会先执行，执行时html代码还没生成，所以那点点击的代码就无效了。

    2 你用a的href 去执行方法 然后传入一个 this 参数进去，这样的话this并不是你点南的a标签 而是window对象。

    0
  • 李晓健
    2015-11-06 09:03:53

     a_btn[i].setAttribute("href","javascript:;");

    你这样伏就拿不到那个当前点击的a 标签了

    a_btn[i].onclick = deleteRow;

    这是不加（） 是因为这里只是对deleteRow的方法的引用，如果加() 就成了调用。

    var deltr = this.parentNode.parentNode;
deltr.parentNode.removeChild(deltr);
a_btn[i].onclick = deleteRow;

    这就是删除一个当前行呀，第一行是拿到行，第二行是从当前行的父节点中把它删除，直接从table中删除这个行会报错。第三行是给一个a添加一个点击事件。

    1
  • DeepNet
    2015-11-05 23:30:42

    var deltr = this.parentNode.parentNode;

     deltr.parentNode.removeChild(deltr);

    a_btn[i].onclick = deleteRow;

    这三句表示什么意思？


    0
  • DeepNet
    2015-11-05 23:13:12

    var a_btn=document.getElementsByTagName("a");

        for (var i=0;i<a_btn.length;i++){

            a_btn[i].setAttribute("href","javascript:;"); //这里为什么不能使用a_btn[i].setAttribute("href","javascript:deleteRow();")

            a_btn[i].onclick = deleteRow; //这里为什么不用加();

        }

     

        //删除行

        function deleteRow(){

            var deltr = this.parentNode.parentNode; // a 的父节点td的父节点tr

            deltr.parentNode.removeChild(deltr); // tr 空白节点的父节点

        }


    请问我以上的注解说明是这样？


    0