为了账号安全,请及时绑定邮箱和手机立即绑定

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

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


正在回答

4 回答

<!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 回复 有任何疑惑可以回复我~
#1

李晓健

注意 62行 改成和55行一样 46行 53行 57行都多出来一个 <
2015-11-05 回复 有任何疑惑可以回复我~
#2

DeepNet 提问者

非常感谢!
2015-11-05 回复 有任何疑惑可以回复我~
#3

DeepNet 提问者

var deltr = this.parentNode.parentNode; deltr.parentNode.removeChild(deltr); a_btn[i].onclick = deleteRow; 这三句表示什么意思?
2015-11-05 回复 有任何疑惑可以回复我~
 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 回复 有任何疑惑可以回复我~
#1

DeepNet 提问者

谢谢你分享
2015-11-06 回复 有任何疑惑可以回复我~
#2

DeepNet 提问者

你好,第二行,表示从当前行的父节点删除,这里的父节点是指空白节点?
2015-11-06 回复 有任何疑惑可以回复我~
#3

李晓健 回复 DeepNet 提问者

console.log() 输出一下看看就知道了
2015-11-06 回复 有任何疑惑可以回复我~

var deltr = this.parentNode.parentNode;

 deltr.parentNode.removeChild(deltr);

a_btn[i].onclick = deleteRow;

这三句表示什么意思?


0 回复 有任何疑惑可以回复我~

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 回复 有任何疑惑可以回复我~
#1

DeepNet 提问者

a的deleteRow,本来是想和添加一行的button效果一样的,
2015-11-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号