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

新手写的代码,用定时器设置ID 然后传递参数的办法 删除tr标签

<!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 table=document.getElementById('table');

        var tablebody = table.firstElementChild;

        var tablebodytr =  tablebody.children; //get tr elements of tables 


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

          tablebodytr[i].setAttribute("onmouseover","this.style.backgroundColor='red'");

          tablebodytr[i].setAttribute("onmouseout","this.style.backgroundColor=''");

        }

}


 

    //creat tables

    function createRows_tables() {

      var table=document.getElementById('table');

      var tablebody = table.firstElementChild;

      var tablebodytr =  tablebody.children; //get tr elements of tables 


      haskell = document.createElement('tr');

      haskell.setAttribute("onmouseout","this.style.backgroundColor=''");

      haskell.setAttribute("onmouseover","this.style.backgroundColor='red'");

      haskell.innerHTML="<td><input type='text' ></td><td><input type='text' ></td><td><a href='javascript:delterTr();' >删除</a></td>"


      tablebody.appendChild(haskell)

      console.log(table.lastElementChild)


    }



     // 创建删除函数

    function delterTr(a) {

      var table=document.getElementById('table');

      var tablebody = table.firstElementChild;

      var tablebodytr =  tablebody.children; //get tr elements of tables 

      tablebodytr[a].remove()


    }

    

    

    function biaoji() {

      //for tables creats id  give remove() argements 

      var table=document.getElementById('table');

      var tablebody = table.firstElementChild;

      var tablebodytr =  tablebody.children; //get tr elements of tables 


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

        tablebodytr[i].setAttribute("tableid",i);

        tablebodytr[i].lastElementChild.lastElementChild.setAttribute("href",'javascript:delterTr('+i+')');

        console.log(tablebodytr[i].lastElementChild.lastElementChild)

      }

      

      

      console.log(i)

      

    }


setInterval(biaoji,1000);  


  </script> 

 </head> 

 <body> 

  <table border="1" width="50%" id="table">

  <tr  id='1'>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

  </tr>  


  <tr  id='2' >

<td>xh001</td>

<td>王小明</td>

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

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

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

  </tr>  


    <tr >

    <td>xh003</td>

    <td>刘小啊</td>

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

    </tr>  


  </table>

    <br>

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

 

    tablebodytr[i].setAttribute("onclick","this.remove()");

  </body>

  

  

</html>


正在回答

举报

0/150
提交
取消

新手写的代码,用定时器设置ID 然后传递参数的办法 删除tr标签

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