问答详情
源自：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(){

                  

        bgcChange();

      }

        function bgcChange(){

            var tbody=document.getElementById('table').lastChild;

            trs = tbody.getElementsByTagName('tr'); 

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

            trs[i].onmouseover=function(){

             this.style.backgroundColor="#f2f2f2";

           }

           trs[i].onmouseout=function(){

              this.style.backgroundColor="#fff";

           }

        }

            

        }

     

     

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

     

     function add(){

         var tbody=document.getElementById('table').lastChild;

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

         

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

         td.innerHTML="<input type="text"/>"

         tr.appendChild(td);

         

          td=document.createElement("td");

         td.innerHTML="<input type="text"/>"

         tr.appendChild(td);

         

          td=document.createElement("td");

         td.innerHTML="<a href="javascript:;" onclick="remove(this)" >删除</a>";

         tr.appendChild(td);

         

         tbody.appendChild(tr);

         

         bgcChange();

             

         }

         

         

     }

   

     

     // 创建删除函数

    function remove(object){

        var tbody=document.getElementById("table").lastChild;

        var tr=object.parentNode.parentNode;

        tbody.removeChild(tr);

    } 



  </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:;" onclick="remove(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

  <input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


提问者：一个高冷蛋一个矮萌 2017-03-26 18:11

个回答

  • 队友杀手
    2017-03-26 19:40:06
    已采纳

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

              {

                  bgcChange(tr[i]);

              }

         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

          }         

    function bgcChange(obj)

         {

            obj.onmouseover=function(){

                obj.style.backgroundColor="#f2f2f2";

            }

            obj.onmouseout=function(){

                obj.style.backgroundColor="#fff";

            }

    }

       

    // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

         var num=2;

         function add(){

            num++;

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

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

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

            xh.innerHTML="xh00"+num;

            xm.innerHTML="第"+num+"学生";

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

            del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";

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

            tab.appendChild(tr);

            tr.appendChild(xh);

            tr.appendChild(xm);

            tr.appendChild(del);

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

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

              {

                  bgcChange(tr[i]);

              }

         }

         

         // 创建删除函数

         function del(obj)

         {

             var tr=obj.parentNode.parentNode;

             tr.parentNode.removeChild(tr);

         }

         

     

     



      </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:;" onclick="del(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->

      </tr>


      <tr>

    <td>xh002</td>

    <td>刘小芳</td>

    <td><a href="javascript:;" onclick="del(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->

      </tr>  


      </table>

      <input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  -->

     </body>

    </html>

    你有许多写错了的地方

    0