为什么运行不出来?

来源:9-22 编程练习

慕粉4408527

2016-12-07 21:34

<!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 tr=document.getElementsByTagName("tr");
        for(var i=0;i<tr.length;i++){
        tr[i].onmouseover=function(){this.style.backgroundColor="#f2f2f2";}
        tr[i].onmouseout=function(){this.style.backgroundColor="#fff";}    
        }
      }
  
    
 
 
    
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
      function add(){
        var tbody=document.getElementById("table").lastChild;
        var tr=document.createElement("tr");

        for(var i=0;i<2;i++){
            var td[i]=document.createElement("td");
            td[i].innerHTML=text("");
            tr.appendChild(td[i]);

        }
            var td=document.createElement("td");
            td.innerHTML="<a href="javascript:;"onclick="delete(this)">删除</a>";
            tr.appendChild(td);
            tbody.appendChild(tr);

      }
      
    
     // 创建删除函数
     function delete(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="delete(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

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

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

写回答 关注

2回答

  • 差不多先生1234
    2016-12-12 15:17:07
    已采纳

    首先,数值在那里面直接定义是不合适的,你应该先声明一数组,然后再赋值,

    还有一个问题,如果我没有记错的话,delete貌似是javascript中预留的关键字,你试着将delete改为别的就可以了。

    <!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 tr=document.getElementsByTagName("tr");
            for(var i=0;i<tr.length;i++){
            tr[i].onmouseover=function(){this.style.backgroundColor="#f2f2f2";}
            tr[i].onmouseout=function(){this.style.backgroundColor="#fff";}     
            }
          }
      
         
      
      
         
          // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
          function add(){
            var tbody=document.getElementById("table").lastChild;
            var tr=document.createElement("tr");
    		var td=new Array();
            for(var i=0;i<2;i++){
                td[i]=document.createElement("td");
                td[i].innerHTML="<input type='text' />";
                tr.appendChild(td[i]);
            }
                var td=document.createElement("td");
                td.innerHTML="<a href='javascript:;' onclick='delet(this)'>删除</a>";
                tr.appendChild(td);
                tbody.appendChild(tr);
          }
          
         
         // 创建删除函数
         function delet(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="delete(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr>
        <tr>
      <td>xh002</td>
      <td>刘小芳</td>
      <td><a href="javascript:;" onclick="delete(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr> 
        </table>
        <input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  -->
     </body>
    </html>


    慕粉4408...

    非常感谢!

    2016-12-12 15:26:40

    共 1 条回复 >

  • 慕粉3836516
    2016-12-08 22:16:59

    var td[i]   delete 标识符命名有错误  

     td.innerHTML="<a href="javascript:;"onclick="delete(this)">删除</a>";

    双引号里边的引号请用单引号


JavaScript进阶篇

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

468190 学习 · 21891 问题

查看课程

相似问题