Javascript計數自適應表格行

Question

我正在學習JavaScript;這是我爲測試做的。我的問題是我想統計我的表格行，但是當我刪除表格名稱時，它應該調整表格行號。

有沒有人可以告訴我該怎麼做或可以做到這一點？如果你有關於我的編碼的評論，請儘可能地給我提供。

var count = 0; 
 

 

 

 
var btn = document.getElementById("btn"); 
 
var table = document.getElementById("table"); 
 

 
var removeRowBtn = document.getElementById("removeRowBtn"); 
 
var tableNr = document.getElementById("tableNr"); 
 

 
// input fields Variable 
 
var firstName = document.getElementsByName("firstName")[0]; 
 
var lastName = document.getElementsByName("lastName")[0]; 
 
var Age = document.getElementsByName("Age")[0]; 
 
var Country = document.getElementsByName("Country")[0]; 
 
var AgeCheck = document.myForm.Age.valueOf; 
 

 
// this function is checking if the input fields have the recuired data in it other wise it give's a error. 
 
function validate() { 
 
    // first name field check + error 
 
    if(document.myForm.firstName.value == "") { 
 
     alert("Please provide your first name!"); 
 
     document.myForm.firstName.focus() ; 
 
     return false; 
 
    } 
 
    // last name field check + error message 
 
    if(document.myForm.lastName.value == "") { 
 
     alert("Please provide your last name!"); 
 
     document.myForm.lastName.focus() ; 
 
     return false; 
 
    } 
 
    // age field check + error message 
 
    if( isNaN(document.myForm.Age.value) || document.myForm.Age.value < 1 || document.myForm.Age.value > 100){ 
 
     alert("Please provide your age!"); 
 
     return false; 
 
    } 
 
    // country select list check + error message 
 
    if(document.myForm.Country.value == "chooseCountry") { 
 
     alert("Please provide your country!"); 
 
     return false; 
 
    } 
 
    // if evry thing is true return a value of true 
 
     return true; 
 
} 
 

 
function tableFunction() { 
 
    // if validate is true go 
 
    if(validate()){ 
 
     // count to see how many row's there are added 
 
     count++; 
 
     // making a new Row 
 
     var newRow = document.createElement("tr"); 
 
     // adding the tow to the Table 
 
     table.appendChild(newRow); 
 
     // adding a class and a count-id to the Row 
 
     newRow.className = "tableRow"; 
 
     newRow.setAttribute ("id", count); 
 

 
     // adding 4 td to the tr 
 
     for(i = 0; i < 5; i++){ 
 
     var newData = document.createElement("td"); 
 
     newRow.appendChild(newData); 
 
     newData.className = "tableData"; 
 

 
     // check the td count and place data in. 
 
      if(i == 0){ 
 
      table.getElementsByTagName("tr")[count].getElementsByTagName("td")[i].innerHTML = count; 
 
      } else if (i == 1) { 
 
      table.getElementsByTagName("tr")[count].getElementsByTagName("td")[i].innerHTML = firstName.value; 
 
      } else if (i == 2) { 
 
      table.getElementsByTagName("tr")[count].getElementsByTagName("td")[i].innerHTML = lastName.value; 
 
      } else if (i == 3) { 
 
      table.getElementsByTagName("tr")[count].getElementsByTagName("td")[i].innerHTML = Age.value; 
 
      } else if (i == 4){ 
 
      table.getElementsByTagName("tr")[count].getElementsByTagName("td")[i].innerHTML = Country.value; 
 
      } 
 
     } 
 

 
    } 
 
    } 
 

 
function removeTableRow(){ 
 
    i = tableNr.value; 
 
    // if there is no table number filled in show a error alert 
 
    if(i == "" ) { 
 
    alert("Please provide a table number!"); 
 
    tableNr.focus() ; 
 
    return false; 
 
    } 
 

 
    // find the chosen array 
 
    var row = table.getElementsByTagName("tr")[i]; 
 

 
    // if the number is not in the row show error alert that it issen't in the table 
 
    if(row == undefined){ 
 
     alert("this row number is not in the table"); 
 
     return false; 
 
    } 
 

 
    row.remove(row.selectedIndex); 
 
} 
 

 

 
removeRowBtn.onclick = function() {removeTableRow()}; 
 
btn.onclick = function(){ tableFunction()};

body{ 
 
    background: white; 
 
} 
 
img{ 
 
    height: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
p{ 
 
    text-align: center; 
 
} 
 
.container{ 
 
    width: 100%; 
 
    max-width: 600px; 
 
    border-radius: 2px; 
 

 
    margin: 0 auto; 
 
    margin-top: 8vh; 
 

 
    background: lightgray; 
 
    box-shadow: 0px 4px 4px darkgray; 
 
} 
 

 

 
table{ 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #dddddd; 
 
} 
 

 

 

 

 

 
/* Button */ 
 

 
.btn { 
 
    display: inline-block; 
 
    margin: 1em auto; 
 
    font-weight: 100; 
 
    padding: 1em 1.25em; 
 
    text-align: center; 
 
    width: 100% ; 
 
    border-radius: 1px; 
 
    position: relative; 
 
    z-index: 0; 
 
    cursor: pointer; 
 
    border: none; 
 
    background: #0c84e4; 
 
    box-shadow: 0px 1px 1px #063e6b; 
 
    color: #FFFFFF; 
 
} 
 
:focus { 
 
    outline: -webkit-focus-ring-color auto 0px; 
 
} 
 
.btn.red{ 
 
    background:red; 
 
    width: 100%; 
 
} 
 

 

 
/* input field style's */ 
 

 
input[type=text] { 
 
    width: calc(25% - 8px); 
 
    padding: 12px 20px 12px 5px; 
 
    margin: 8px 4px; 
 
    box-sizing: border-box; 
 
    float: left; 
 
    border: none; 
 
    border-bottom: 2px solid #536DFE; 
 
    text-align: center; 
 
    background: transparent; 
 
} 
 
input:focus{ 
 
    outline: none; 
 
    color: black; 
 
} 
 
::-webkit-input-placeholder{ 
 
    color:black; 
 
    font: helvetica 12px bold ; 
 
    text-align: center; 
 
} 
 

 
select{ 
 
    width: calc(25% - 8px); 
 
    padding: 12px 20px 12px 5px; 
 
    margin: 8px 4px; 
 
    box-sizing: border-box; 
 
    float: left; 
 
    border: none; 
 
    border-bottom: 2px solid #536DFE; 
 
    text-align: center; 
 
    background: transparent; 
 
    height: 39px; 
 
    border-radius: 0px !important; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Inzend Opgave H5</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 

 
    <!-- style sheets --> 
 
    <link href="style.css" rel="stylesheet" type="text/css" > 
 
    </head> 
 

 
    <body> 
 
    <div id="wrapper"> 
 
     <section class="container"> 
 
      <form id="personInfo" name="myForm"> 
 
       <table> 
 
        <tbody id="table"> 
 
         <tr> 
 
         <td>nr.</td> 
 
         <td>First Name</td> 
 
         <td>Last Name</td> 
 
         <td>Age</td> 
 
         <td>Country</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 

 
       <input type="text" name="firstName" placeholder="firstName"> 
 
       <input type="text" name="lastName" placeholder="lastName"> 
 
       <input type="text" name="Age" placeholder="Age"> 
 
       <select name="Country"> 
 
        <option value="choose a country">Kies een land</option> 
 
        <option value="Nederland">NL</option> 
 
        <option value="Belgie">BE</option> 
 
        <option value="Duitsland">DE</option> 
 
       </select> 
 

 
       <input type="button" name="button" id="btn" class="btn" value="Add the input fields to the table"> 
 
       <p>To remove a table number fill in the input field with the <br> number of the table and click remove table row</p> 
 
       <input type="button" name="button" id="removeRowBtn" class="btn" value="remove table row" style="width: 75%;"> 
 
       <input type="text" name="TableNr" id="tableNr" placeholder="table nr."> 
 

 
      </form> 
 
     </section> 
 
    </div> 
 

 

 

 
    <!-- java-scripts --> 
 
    <script type="text/javascript" src="script.js"></script> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script> 
 
    <script type="text/javascript"> 
 
     var cw = $('.container').width(); 
 
     $('.container').css({ 
 
      'height': cw + 'px' 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

Answer 1

變化

row.remove(row.selectedIndex); 

到

row.remove(row.selectedIndex); 
var rows = document.querySelectorAll("#table tr"); 
for (var i = 1; i < rows.length; i++) { rows[i].cells[0].innerText = i; }