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

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

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

提问者：慕丝4883087 2019-02-15 23:26

个回答

  • 慕莱坞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
  • 慕莱坞9076050
    2019-03-18 11:28:55

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

    0
  • 慕丝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