Javascript counting adaptive table rows

Question

I am trying to learn JavaScript; this is what I made for a test. My problem is that I want to count my table rows, but when I remove a table name it should adapt the table row numbers.

Is there someone who can tell me how I should or could do this? If you have a comment about my coding please give it as I want to learn as much as possible.

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>

Add a thead and try this: var rows = document.querySelectorAll("#table tr"); for (var i = 0; i < rows.length; i++) { rows.cells[0].innerText = (i + 1); } — mplungjan
– mplungjan, Commented Apr 13, 2017 at 8:21
i can't make this work i think my problem is that the count is in my tableFunction and this is why it is not refreshing evry time there is a change on the website. + my count is on the moment static. — mike
– mike, Commented Apr 13, 2017 at 8:43
i'm sorry i think this should work but i didn't use it the way it should — mike
– mike, Commented Apr 21, 2017 at 7:19

mplungjan · Accepted Answer · 2017-04-13 08:46:56Z

0

Change

row.remove(row.selectedIndex);

to

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

answered Apr 13, 2017 at 8:46

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mike Over a year ago

Thanks this is realy help full it works like it suppose to.

Collectives™ on Stack Overflow

Javascript counting adaptive table rows

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related