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

哪里出错了?为什么一点效果都没有

<!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 c1=document.getElementsByTagName("tr");  

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

          c1[i].onmouseover = function(){

              c1[i].style.backgroundColor="#f2f2f2";

          }

          c1[i].onmouseout = function(){

              c1[i].style.backgroundColor="#fff";

          }

  } 

     

 

}

     

      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;

     function addOne(){

         var tar = document.getElementById("table").lasrChild;

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

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

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

         tr.appendChild(td);

         

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

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

         tr.appendChild(td);

         

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

         td.innerHTML="<a href="javascript:;" />删除";

         tr.appendChild(td);

         

         

         tar.appendChild(tr);

     }

   

     

     // 创建删除函数

     function dele(obj){

        var detr = obj.parentNode.parentNode;

        detr.parentNode.removeChild(detr);

     }



  </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="dele(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

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

  </tr>  


  </table>

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

 </body>

</html>


正在回答

4 回答

         var tar = document.getElementById("table").lasrChild; 写错了,把后面的.lasrChild去掉,在addOne()函数的最后面添加

      tr.onmouseover = function(){

              tr.style.backgroundColor="#f2f2f2";

          }

          tr.onmouseout = function(){

             tr.style.backgroundColor="#fff";

          }


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

juanyong 提问者

非常感谢!
2016-07-08 回复 有任何疑惑可以回复我~

在function addone()函数里面 调用 高亮表格一行的函数

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

juanyong 提问者

嗯嗯,有效果了
2016-07-08 回复 有任何疑惑可以回复我~
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<body>
<table border="1" width="50%" id="table">
<tr onmousemove="changeStyle(this,'backgroundColor', '#f2f2f2')" onmouseout="changeStyle(this,'backgroundColor', '#fff')">
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr onmousemove="changeStyle(this,'backgroundColor', '#f2f2f2')" onmouseout="changeStyle(this,'backgroundColor', '#fff')">
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="dele(this)">删除</a></td>
<!--在删除按钮上添加点击事件  -->
</tr>
<tr onmousemove="changeStyle(this,'backgroundColor', '#f2f2f2')" onmouseout="changeStyle(this,'backgroundColor', '#fff')">
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="dele(this)">删除</a></td>
<!--在删除按钮上添加点击事件  -->
</tr>
</table>
<input type="button" value="添加一行" onclick="addOne()" />
<!--在添加按钮上添加点击事件  -->
<script type="text/javascript">
var changeStyle = function(elem, attr, value) {
elem.style[attr] = value; 
};
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
function addOne() {
var tar = document.getElementById("table").lastChild;
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = "<input type='text'/>";
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<input type='text'/>";
tr.appendChild(td2);
var td3 = document.createElement("td");
td3.innerHTML = "<a href=\"javascript: ;\" onclick=\"dele(this)\" />删除";
tr.appendChild(td3);
tar.appendChild(tr);
}
// 创建删除函数
function dele(obj) {
var detr = obj.parentNode.parentNode;
detr.parentNode.removeChild(detr);
}
</script>
</body>
</html>

亲测可用,望采纳!

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

juanyong 提问者

那如果我表格再添加一行,鼠标放在上面不久没有效果了吗
2016-07-08 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

哪里出错了?为什么一点效果都没有

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