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

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>

提问:

  window.onload = function(){

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

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

                trs[i].onmouseover = function(){

                     this.style.backgroundColor = "#f2f2f2"; // 为什么此处不能把this换成trs[i]

                }

                trs[i].onmouseout = function(){

                     this.style.backgroundColor = "#fff";//同上?

                }

          }

        }


正在回答

3 回答

补充提问:

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);

          }

这个增加一行的函数里,三个tr变量最后用一个 table.appendChild(tr);就能全插到表格里了吗?

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

举报

0/150
提交
取消

9-22编程练习 新手求助!

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