javascript - 通过 JavaScript 将新元素添加到 html 表不符合我的预期

Question

当我向表格中添加新元素时，它总是添加在顶部并替换我原来的标题。我希望这样，当我添加新元素时，它会添加到最后一行。

结果截图如下:

  
            var rIndex,
                table = document.getElementById("table");
            
            // check the empty input
            function checkEmptyInput()
            {
                var isEmpty = false,
                    Uname = document.getElementById("Uname").value,
                    Cname = document.getElementById("Cname").value,
                    Tname = document.getElementById("Tname").value,
            	    Kname = document.getElementById("Kname").value,
                    Mname = document.getElementById("Mname").value,
                    Oname = document.getElementById("Oname").value;
            
                if(Uname === ""){
                    alert("This cannot Be Empty");
                    isEmpty = true;
                }
                else if(Cname === ""){
                    alert("This cannot Be Empty");
                    isEmpty = true;
                }
                else if(Tname === ""){
                    alert("This cannot Be Empty");
                    isEmpty = true;
                }
		else if(Kname === ""){
                    alert("This cannot Be Empty");
                    isEmpty = true;
                }
                else if(Mname === ""){
                    alert("This cannot Be Empty");
                    isEmpty = true;
                }
		else if(Oname === ""){
                    alert("This cannot Be Empty");
                    isEmpty = true;
                }
                return isEmpty;
            }
            
            // add Row
            function addHtmlTableRow()
            {
                // get the table by id
                // create a new row and cells
                // get value from input text
                // set the values into row cell's
                if(!checkEmptyInput()){
                var newRow = table.insertRow(table.length),
                    cell1 = newRow.insertCell(0),
                    cell2 = newRow.insertCell(1),
                    cell3 = newRow.insertCell(2),
		    cell4 = newRow.insertCell(3),
                    cell5 = newRow.insertCell(4),
                    cell6 = newRow.insertCell(5),
                    Uname = document.getElementById("Uname").value,
                    Cname = document.getElementById("Cname").value,
                    Tname = document.getElementById("Tname").value,
            	    Kname = document.getElementById("Kname").value,
                    Mname = document.getElementById("Mname").value,
                    Oname = document.getElementById("Oname").value;
            
                cell1.innerHTML = Uname;
                cell2.innerHTML = Cname;
                cell3.innerHTML = Tname;
		cell4.innerHTML = Kname;
                cell5.innerHTML = Mname;
                cell6.innerHTML = Oname;
                // call the function to set the event to the new row
                selectedRowToInput();
            }
            }
            
            // display selected row data into input text
            function selectedRowToInput()
            {
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                      // get the seected row index
                      rIndex = this.rowIndex;
                      document.getElementById("Uname").value = this.cells[0].innerHTML;
                      document.getElementById("Cname").value = this.cells[1].innerHTML;
                      document.getElementById("Tname").value = this.cells[2].innerHTML;
		      document.getElementById("Kname").value = this.cells[3].innerHTML;
                      document.getElementById("Mname").value = this.cells[4].innerHTML;
                      document.getElementById("Oname").value = this.cells[5].innerHTML;
                    };
                }
            }
            selectedRowToInput();
            
            function editHtmlTbleSelectedRow()
            {
                var Uname = document.getElementById("Uname").value,
                    Cname = document.getElementById("Cname").value,
                    Tname = document.getElementById("Tname").value,
            	    Kname = document.getElementById("Kname").value,
                    Mname = document.getElementById("Mname").value,
                    Oname = document.getElementById("Oname").value;
               if(!checkEmptyInput()){
                table.rows[rIndex].cells[0].innerHTML = Uname;
                table.rows[rIndex].cells[1].innerHTML = Cname;
                table.rows[rIndex].cells[2].innerHTML = Tname;
		table.rows[rIndex].cells[3].innerHTML = Kname;
                table.rows[rIndex].cells[4].innerHTML = Mname;
                table.rows[rIndex].cells[5].innerHTML = Oname;
              }
            }
            
            function removeSelectedRow()
            {
                table.deleteRow(rIndex);
                // clear input text
		            document.getElementById("Uname").value ="";
               	document.getElementById("Cname").value ="";
                document.getElementById("Tname").value ="";
            	  document.getElementById("Kname").value ="";
                document.getElementById("Mname").value ="";
                document.getElementById("Oname").value ="";
            }

.container{overflow: hidden}
            .tab{float: left;}
            .tab-2{margin-left: 50px}
            .tab-2 input{display: block;margin-bottom: 10px}
            tr{transition:all .25s ease-in-out}
            tr:hover{background-color:#EEE;cursor: pointer}
            

<!DOCTYPE html>
<html>
    <head>
        <title>Add Edit Remove HTML Table Row</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{overflow: hidden}
            .tab{float: left;}
            .tab-2{margin-left: 50px}
            .tab-2 input{display: block;margin-bottom: 10px}
            tr{transition:all .25s ease-in-out}
            tr:hover{background-color:#EEE;cursor: pointer}
            
            </style>
        
    </head>
    <body>
        
        <div class="container">
            <div class="tab tab-1">
                <table id="table" border="1" >
                    <tr class="header">
                <th class="style2">Unit Num.</th>
                <th class="style3">Computer</th>
                <th class="style3">Tower</th>
                <th class="style9">Keyboard</th>
                <th class="style3">Mouse</th>
                <th class="style4">Overall State</th>
            </tr>
            <tr>
                 <td class="style5">1</td>
                 <td class="style5">1</td>
                 <td class="style5">1</td>
                 <td class="style7">1</td>
                 <td class="style5">1</td>
                 <td class="style6">Very Good</td>
            </tr>
                    <tr>
                        <td>A1</td>
                        <td>B1</td>
                        <td>10</td>
			<td>A1</td>
                        <td>B1</td>
                        <td>10</td>
                    </tr>
                    
                </table>
            </div>
            <div class="tab tab-2">
       Unit Number :<input type="number" name="Uname" id="Uname">
       Computer ID :<input type="number" name="Cname" id="Cname">
       Tower ID :<input type="number" name="Tname" id="Tname">
		  Keyboard ID :<input type="number" name="Kname" id="Kname">
     Mouse ID :<input type="number" name="Mname" id="Mname">
      Overall State :<input type="number" name="Oname" id="Oname">
                
    <button onclick="addHtmlTableRow();">Add</button>
     <button onclick="editHtmlTbleSelectedRow();">Edit</button>
    <button onclick="removeSelectedRow();">Remove</button>
            </div>
        </div>
   </body>
</html>

Answer 1

        if(!checkEmptyInput()){
            var newRow = table.insertRow(table.length),
                cell1 = newRow.insertCell(0),
                cell2 = newRow.insertCell(1),

在上面的代码中，您需要将 table.length 更改为 table.rows.length。 table 是 HTMLTableElement 类型，没有 length 属性。