The JS code problem is solved by the following code

<!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(){  //
        Highlight();
     }  
     
     function Highlight(){
         var tbody = document.getElementById("table").lastChild;    //tabletr
        trs = tbody.getElementsByTagName("tr");   
        for(var i =1;i<trs.length;iPP){    
            trs[i].onmouseover = function(){
                this.style.backgroundColor ="-sharpf2f2f2";
            } 
            trs[i].onmouseout = function(){
                this.style.backgroundColor ="-sharpfff";
            } 
        }  
     }
          
     function addOne(obj){ 
        var tbody = document.getElementById("table").lastChild;  
        var tr = document.createElement("tr");  
         
         var td = document.createElement("td");
         td.innerHTML = "<input type="text"/>";
         tr.appendChild(td);
         
         td = document.createElement("td");     
         td.innerHTML = "<input type="text"/>";
         tr.appendChild(td);
         
         td = document.createElement("td");    
         td.innerHTML = "<a href="javascript：;" onclick="deleteRow(this)"></a>";
         tr.appendChild(td);   
         
         tbody.appendChild(tr);   //tabletrtr
        Highlight();
        }

     function deleteRow(obj){
        var tbody = document.getElementById("table").lastChild;   //tabletrtr
        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="deleteRow(this)"></a></td>
       </tr>

       <tr>
        <td>xh002</td>
        <td></td>
        <td><a href="javascript：;" onclick="deleteRow(this)"></a></td>
       </tr>  

       </table>
       <input type="button" value="" onclick="addOne()" />
 </body>
</html>

var tbody = document.getElementById ("table"). LastChild; the last child node of the table node where id is table is the last tr node, isn"t it? Isn"t there only one? Why is it an array?

Css javascript html
Mar.20,2021

< tbody > tag to learn about

http://www.w3school.com.cn/ta.

the Chinese translation of MDN is not finished yet, but it is enough to understand w3school.

https://developer.mozilla.org.

Hello, does not return an array node. Instead, it is the tbody node label under table.
Modern browsers add this tag to adapt to the W3C standard.

Previous: Realization of 3D histogram by E chart

Next: Ele table dynamic column

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu