怎样改变后面删除文字颜色

来源:9-22 编程练习

飘移的鼻毛

2015-09-30 10:44

怎样改变后面删除文字颜色

写回答 关注

2回答

  • 飘移的鼻毛
    2015-09-30 12:48:54

    <!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(){
                      
         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
             
            addtr();

         }
         function addtr(){
             var tr=document.getElementsByTagName("tr");
             var td=document.getElementById("changecolor");
             for(var i=0;i<tr.length;i++){
                 tr[i].onmouseover=function(){
                     this.style.backgroundColor="green";
                     this.style.color="#fff";
                 }
                 tr[i].onmouseout=function(){
                     this.style.backgroundColor="#fff";
                     this.style.color="#000";
                 }
             }
             for(var j=0;j<td.length;j++){
                 td[j].onmouseover=function(){
                     td[j].style.color="#fff";
                 }
                 td[j].onmouseout=function(){
                    td[j].style.color="#000";
                 }
             }
         }
         
          // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
         function add(){
             var tr=document.createElement("tr");
             
             var tdxh=document.createElement("td");
             tdxh.innerHTML="<input type='text'>";
             tr.appendChild(tdxh);
             
             
             var tdmz=document.createElement("td");
             tdmz.innerHTML="<input type='text'>";
             tr.appendChild(tdmz);
             
             var tdcz=document.createElement("td");
             tdcz.innerHTML="<a href='javascript:;' onclick='removes(this)'>删除</a>";
             tr.appendChild(tdcz);
             
             var table=document.getElementById("table");
             table.appendChild(tr);
             
             addtr();
         }
                
           
         // 创建删除函数
         function removes(row){
             var tr=row.parentNode.parentNode;
             tr.parentNode.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 id="changecolor"><a href="javascript:;" onclick="removes(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
           </tr>

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

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


    我这样做还是不行,我不知道问题出在哪里,麻烦帮忙解答一下

  • 章鱼小丸子
    2015-09-30 10:56:13

    直接在“删除”那一行的td加上class,然后用class设置颜色

JavaScript进阶篇

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

468060 学习 · 21891 问题

查看课程

相似问题