不找哪行的问题,添加不了行

来源:9-22 编程练习

夜阑卧听风吹雨y

2018-06-19 22:49

</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="#" onclick = "deleteItem(this);return false;" >删除</a></td>

     </tr>


     <tr>

    <td>xh002</td>

    <td>刘小芳</td>

    <td><a href="javasript:;" onclick = "deleteItem(this);" >删除</a></td>

     </tr>

     </table>

     <input type="button" value="添加一行"  onclick = "addTo();"/>

 </body>

</html>


写回答 关注

3回答

  • 慕圣7096405
    2018-07-05 11:10:51

    代码没有太大问题,都是些细节问题,不难找出错误。错误一: td.innerHTML='<a href="#" onclick = "deleteItem(this);return false;">删除</a>;这行代码改为:td.innerHTML="<a href='#' onclick='deleteItem(this);return false;'>删除</a>";。这里面的错误就是双引号和单引号的用法,我就不多做介绍了。错误二:table.removeChild(tr);改成:table.removeChild(tr);这里面的错误就是中文分号和英文分号的问题,打字后记得切换为英文输入法,这是一个程序员的基本素质,不然出现小的细节错误很难发现。

  • 夜阑卧听风吹雨y
    2018-06-20 21:21:07

    <!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 trs = document.getElementsByTagName('tr');

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

               {

                    trs[i].onmouseover = function()//触发trs【i】的鼠标移到上面事件

                    {

                         this.style.backgroundColor = "#f2f2f2";//鼠标移到上面触发背景色改变

                    }

                    trs[i].onmouseout = function()

                    {

                         this.style.backgroundColor = "#fff";

                    }

               }

            }


         function addTo(){

               var table = document.getElementById('table').lastChild;//访问table节点下的最后一个子节点


               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="#" onclick = "deleteItem(this);return false;">删除</a>;

               tr.appendChild(td);


               table.appendChild(tr);

              }


          function deleteItem(obj){

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

                var tr = obj.parentNode.parentNode;

                table.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="#" onclick = "deleteItem(this);return false;">删除</a></td>   <!--在删除按钮上添加点击事件  -->

      </tr>


      <tr>

    <td>xh002</td>

    <td>刘小芳</td>

    <td >

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

      </tr>  


      </table>

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

     </body>

    </html>


  • StoneDz
    2018-06-20 10:59:28

    js代码贴一下

JavaScript进阶篇

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

468195 学习 · 21891 问题

查看课程

相似问题