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

9-22编程练习同学代码又没明白的地方 新手自学求帮助!

同学代码如下:

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <script type="text/javascript">

      window.onload = function(){

           var trs = document.getElementsByTagName('tr');

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

                trs[i].onmouseover = function(){

                     this.style.backgroundColor = "#f2f2f2";

                }

                trs[i].onmouseout = function(){

                     this.style.backgroundColor = "#fff";

                }

          }

        }


     function addTo(){

           var table = 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="#" 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="javasript:;" onclick = "deleteItem(this);" >删除</a></td>

     </tr>

     </table>

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

 </body>

</html>

提问:

一、 function deleteItem(obj){

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

            var tr = obj.parentNode.parentNode;

            table.removeChild(tr);

该函数是创建删除行的函数, var table = document.getElementById('table').lastChild; 这个找到的是table最后一个节点,该节点是 最后一个</tr>和</table>之间的空白节点。不知道我理解的对不对。  那table.removeChild(tr);这句话执行就应该有问题啊?



正在回答

1 回答

....我找到答案了!

table的结构,table默认包含thead,tfoot,tbody,而且是按这个顺序排列的,所有lastchild就是取得tbody

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

举报

0/150
提交
取消

9-22编程练习同学代码又没明白的地方 新手自学求帮助!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信