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?

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.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3c49c-4088b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3c49c-4088b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?