在这里发一个相对完整而且整齐的-慕课网

在这里发一个相对完整而且整齐的

来源：9-22 编程练习

慕丝4883087

2019-02-15 23:26

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

      window.onload = function (){

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
      var tr=document.getElementsByTagName("tr");
      for (var i=0;i<tr.length;i++){
          tr[i].setAttribute("onmouseover","javascript:this.style.backgroundColor='#f2f2f2'");
          tr[i].setAttribute("onmouseout","javascript:this.style.backgroundColor='#fff'")
      }
   }

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function addrow(){
         var table=document.getElementById("table");
         var newtr=document.createElement("tr");
         var newid=document.createElement("td");
         var newname=document.createElement("td");
         var newope=document.createElement("td");
         var newa=document.createElement("a");
         newid.innerHTML=prompt("input id","");
         newname.innerHTML=prompt("input name","")
         newa.setAttribute("href","javascript:void(0));");
         newa.setAttribute("onclick","deleterow(this)");
         newa.innerHTML="删除";
         newope.appendChild(newa);
         newtr.appendChild(newid);
         newtr.appendChild(newname);
         newtr.appendChild(newope);
         table.appendChild(newtr);
         window.onload();
     }
     // 创建删除函数
     function deleterow(delnode){
         var thisrow=delnode.parentNode.parentNode;
         var par=thisrow.parentNode;
         var nodelist=par.childNodes;
         for (var i=0;i<nodelist.length;i++)
         {
            if (nodelist[i].nodeType=="1")
            {
                if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
                par.removeChild(nodelist[i]);
            }
         }
     }

</script>
</head>
<body>
       <table border="1" width="50%" id="table">
       <tr>
       <th>学号</th>
       <th>姓名</th>
       <th>操作</th>
       </tr>

       <tr>
       <td>xh001</td>
       <td>王小明</td>
       <td><a href="javascript:void(0));" onclick="deleterow(this)">删除</a></td>   
       </tr>

       <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:void(0));" onclick="deleterow(this)">删除</a></td>   
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="addrow()" />   
</body>
</html>

写回答关注

3回答

慕莱坞9076050

2019-03-18 15:38:58

麻烦能解释一下这段吗？
// 创建删除函数
     function deleterow(delnode){
         var thisrow=delnode.parentNode.parentNode;
         var par=thisrow.parentNode;
         var nodelist=par.childNodes;
         for (var i=0;i<nodelist.length;i++)
         {
            if (nodelist[i].nodeType=="1")
            {
                if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
                par.removeChild(nodelist[i]);
            }
         }
     }


0 0
慕莱坞9076050

2019-03-18 11:28:55

请问
newa.setAttribute("href","javascript:void(0));");
newa.setAttribute("onclick","deleterow(this)");
这两句代码是什么意思

3 0

xiao二回复weibo_...

添加属性哈

2019-03-19 11:12:23

共 3 条回复 >
慕丝4883087

2019-02-15 23:26:35

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

      window.onload = function (){

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
      var tr=document.getElementsByTagName("tr");
      for (var i=0;i<tr.length;i++){
          tr[i].setAttribute("onmouseover","javascript:this.style.backgroundColor='#f2f2f2'");
          tr[i].setAttribute("onmouseout","javascript:this.style.backgroundColor='#fff'")
      }
   }

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function addrow(){
         var table=document.getElementById("table");
         var newtr=document.createElement("tr");
         var newid=document.createElement("td");
         var newname=document.createElement("td");
         var newope=document.createElement("td");
         var newa=document.createElement("a");
         newid.innerHTML=prompt("input id","");
         newname.innerHTML=prompt("input name","")
         newa.setAttribute("href","javascript:void(0));");
         newa.setAttribute("onclick","deleterow(this)");
         newa.innerHTML="删除";
         newope.appendChild(newa);
         newtr.appendChild(newid);
         newtr.appendChild(newname);
         newtr.appendChild(newope);
         table.appendChild(newtr);
         window.onload();
     }
     // 创建删除函数
     function deleterow(delnode){
         var thisrow=delnode.parentNode.parentNode;
         var par=thisrow.parentNode;
         var nodelist=par.childNodes;
         for (var i=0;i<nodelist.length;i++)
         {
            if (nodelist[i].nodeType=="1")
            {
                if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
                par.removeChild(nodelist[i]);
            }
         }
     }

</script>
</head>
<body>
       <table border="1" width="50%" id="table">
       <tr>
       <th>学号</th>
       <th>姓名</th>
       <th>操作</th>
       </tr>

       <tr>
       <td>xh001</td>
       <td>王小明</td>
       <td><a href="javascript:void(0));" onclick="deleterow(this)">删除</a></td>   
       </tr>

       <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:void(0));" onclick="deleterow(this)">删除</a></td>   
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="addrow()" />   
</body>
</html>

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题

完整代码！！

回答 1

这里的加载完了是指整个html页面加载完了吗？

回答 2

代码完整版

回答 3

完整版代码

回答 8

求完整的switch 例子

回答 2

打开慕课网App查看更多内容