帮忙看下,为什么代码运行不出来?谢谢啦

来源:9-22 编程练习

qq_yEs先生_53591812

2016-08-03 18:19

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


写回答 关注

4回答

  • 水里有条鱼
    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'/>";

    qq_yEs... 回复水里有条鱼

    明白了 感谢!

    2016-08-04 11:51:59

    共 3 条回复 >

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

    注意:

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

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

    qq_yEs...

    兄弟 你这说的和我这个问题有啥关系吗?

    2016-08-03 20:24:58

    共 1 条回复 >

  • 慕先生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就是你要删的那一行?

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

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

    qq_yEs...

    单引号双引号都是可以的,应该不是这个问题

    2016-08-03 18:46:03

    共 1 条回复 >

JavaScript进阶篇

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

468061 学习 · 21891 问题

查看课程

相似问题