问答详情
源自：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 add(){
        var table=document.getElementById("table").lastChild;
        var tr=document.createElement("tr");

        var td=document.createElement("td");
        td.innerHTML="<input type="text"/>";
        tr.appendChild(td);
        var td=document.createElement("td");
        td.innerHTML="<input type="text"/>";
        tr.appendChild(td);
        var td=document.createElement("td");
        td.innerHTML="<a href="#" onclick = "del(this);">删除</a>";
        tr.appendChild(td);
        table.appendChild(tr);

      }
      function del(obj){
        var tbody=document.getElementById("table").lastChild;
        var  tr=obj.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="del(this);">删除</a></td>
     </tr>

     <tr>
    <td>xh002</td>
    <td>刘小芳</td>
    <td><a href="javasript:;" onclick = "del(this);" >删除</a></td>
     </tr>
     </table>
     <input type="button" value="添加一行"  onclick = "add();"/>
 </body>
</html>


提问者：qq_yEs先生_53591812 2016-08-03 18:19

个回答

  • 水里有条鱼
    2016-08-03 22:35:26
    已采纳

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

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

            tr.appendChild(td);

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

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

            tr.appendChild(td);

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

            td.innerHTML="<a href="#" onclick = "del(this);">删除</a>";

    这几句里面的双引号里面不能再次使用双引号，里面要改为单引号

    例如:td.innerHTML="<input type="text"/>";改为

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

    0
  • 慕先生9178337
    2016-08-03 19:36:48

    注意:

    1. IE全系列、firefox、chrome、opera、safari兼容问题

    2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:  图见9-8章。

    0
  • 慕先生9178337
    2016-08-03 19:16:08

     function del(obj){

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

            var  tr=obj.parentNode.parentNode;

            tbody.removeChild(tr);

         }

    你的这个删除函数定位准确吗？你确定删除的lastChild就是你要删的那一行？

    0
  • 慕先生9178337
    2016-08-03 18:43:42

    var trs = document.getElementsByTagName('tr');  这里面的引号是单引号，不是应该为双引号的吗？

    0