using while loop to create table rows js

Using While Loop to Create Table Rows in JavaScript

If you want to create multiple rows in a HTML table using JavaScript, you can use a while loop to generate the rows dynamically. This is useful when you have a large amount of data that needs to be displayed in a table, and you don't want to manually write out each row.

Step 1: Create a Table in HTML

We start by creating a basic HTML table structure, with an empty body:

<div id="myTable">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody id="myTableBody">
    </tbody>
  </table>
</div>

We have created a div with an ID of "myTable", which contains a table element with a thead section and an empty tbody section with an ID of "myTableBody". We will use this ID to add rows dynamically using JavaScript.

Step 2: Generate Rows Using While Loop in JavaScript

Now, we will use JavaScript to generate table rows dynamically using a while loop. We will create an array of objects containing the data for each row, and then loop through the array to create rows:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css" integrity="sha512-h7hGkOvKjVZf1Mwdnt8Er7hLfhwk48Yez7dDzr9GQHrK98hG1Zd3qKjkt8Wx0i6w0UyBjU6o9CVWzgF6vJnRkA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script>
  // data for table rows
  var rows = [
    { name: "John", age: 25, gender: "Male" },
    { name: "Sarah", age: 30, gender: "Female" },
    { name: "Tom", age: 20, gender: "Male" }
  ];
  
  var tableBody = document.getElementById("myTableBody");
  
  // loop through rows array and create table rows
  var i = 0;
  while (i < rows.length) {
    var row = tableBody.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    
    // add data to cells
    cell1.innerHTML = rows[i].name;
    cell2.innerHTML = rows[i].age;
    cell3.innerHTML = rows[i].gender;
    
    i++;
  }
</script>

In this code, we have created an array of objects called "rows", which contains the data for each row in the table. We have then used JavaScript to loop through the array using a while loop. Inside the loop, we have used the insertRow() method to create a new row in the table, and the insertCell() method to create cells in the row. We have then added the data to the cells using the innerHTML property.

Finally, we have used the ID of the tbody element we created earlier to add the rows to the table dynamically.

Multiple Ways to Generate Rows Using JavaScript

There are multiple ways to generate table rows dynamically using JavaScript. One way is to use a for loop instead of a while loop:

for (var i = 0; i < rows.length; i++) {
  var row = tableBody.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  // add data to cells
  cell1.innerHTML = rows[i].name;
  cell2.innerHTML = rows[i].age;
  cell3.innerHTML = rows[i].gender;
}

This code is very similar to the while loop code, but uses a for loop instead. The advantage of using a for loop is that it is more concise and easier to read.

Another way to generate table rows dynamically is to use the map() method:

rows.map(function(row) {
  var newRow = tableBody.insertRow(-1);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  
  // add data to cells
  cell1.innerHTML = row.name;
  cell2.innerHTML = row.age;
  cell3.innerHTML = row.gender;
});

This code uses the map() method to loop through the rows array, and create a new row for each object in the array. The advantage of using the map() method is that it is more functional and concise.

Conclusion

In conclusion, using a while loop to generate table rows in JavaScript is a powerful technique for creating dynamic tables. We have seen how to create a basic HTML table structure, and how to use JavaScript to generate rows dynamically using a while loop. We have also explored multiple ways to generate table rows dynamically, including using a for loop and the map() method.