how to add column number serially in javascript?

user_16170800 0
Viewed 784

add two buttons. one will add a row at the top below the header row with data and another will add a row at the bottom with data. and the columns no will be adjusted automatically

<body>
  <table id="tbl">
    <tr>
      <th>S. No.</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>City</th>
      <th>Country</th>
    </tr>
    <tr class="tr">
      <td>1</td>
      <td>Bill</td>
      <td>Gates</td>
      <td>Washington</td>
      <td>U.S</td>
    </tr>
    <tr class="tr">
      <td>2</td>
      <td>Elon</td>
      <td>Mask</td>
      <td>Pretoria</td>
      <td>South Africa</td>
    </tr>
  </table>
  <div onclick="appendRow()" class="btn1">
    <button><b>Add row to bottom</b></button>
  </div>
  <div onclick="appendRowTop()">
    <button class="btn2"><b>Add row to top</b></button>
  </div>
  <script src="index.js"></script>
</body>
html javascript
5 Answers

This should be what you need.

function appendRow(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(-1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML=(table.rows.length-1);
  for (let i=1;i<firstRow.cells.length;i++){
    cell=row.insertCell(-1)
    switch (i){
      case 1:
        cell.innerHTML="a";
        break;
      case 2:
        cell.innerHTML="2";
        break;
      case 3:
        cell.innerHTML="c";
        break;  
      case 4:
        cell.innerHTML="3";
        break;        
    }
  }  
}
function appendRowTop(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML="1";
  for (let i=0;i<firstRow.cells.length-1;i++){
    cell=row.insertCell(-1)
  } 
  for (let i=2;i<table.rows.length;i++){
    table.rows[i].cells[0].innerHTML=i;
  }
}
<table id="tbl">
        <tr>
            <th>S. No.</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr class="tr">
            <td>1</td>
            <td>Bill</td>
            <td>Gates</td>
            <td>Washington</td>
            <td>U.S</td>
        </tr>
        <tr class="tr">
            <td>2</td>
            <td>Elon</td>
            <td>Mask</td>
            <td>Pretoria</td>
            <td>South Africa</td>
        </tr>
    </table>
    <div onclick="appendRow()" class="btn1">
        <button><b>Add row to bottom</b></button>
    </div>
    <div onclick="appendRowTop()">
        <button class="btn2"><b>Add row to top</b></button>
    </div>

user_20182780

This is my solution. I am using jQuery, but nothing prevents you from using vanilla JS instead. I made some small modifications to your HTML:

<table id="tbl">
  <tr class="header">
    <th>S. No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>Bill</td>
    <td>Gates</td>
    <td>Washington</td>
    <td>U.S</td>
  </tr>
  <tr class="row">
    <td>2</td>
    <td>Elon</td>
    <td>Mask</td>
    <td>Pretoria</td>
    <td>South Africa</td>
  </tr>
</table>
<button id="btnAddAbove" class="btnAdd">Add row to top</button>
<button id="btnAddBelow" class="btnAdd">Add row to bottom</button>

Here is my code:

// Bind to click event on buttons
$(".btnAdd").on("click", function(){
    // Get highest existing number and add 1
  let rowNum = parseInt(getHighestNumber()) + 1;
  // The next 4 lines should be populated with values from elsewhere
  let firstname = "myFirstName";
  let lastname = "myLastName";
  let city = "myCity";
  let country = "myCountry";
  // Build HTML to insert
    let html = `<tr class="row">
    <td>${rowNum}</td>
    <td>${firstname}</td>
    <td>${lastname}</td>
    <td>${city}</td>
    <td>${country}</td>
  </tr>`;
  // Get which button was clicked
  let btn = $(this).attr("id");
  if (btn=="btnAddAbove") {
    // Insert the HTML after the header row, i.e. first in the actual table
    $(".header").after(html);
  } else if (btn=="btnAddBelow") {
    // Append the new row at the end of the table
    $("#tbl").append(html);
  }
});

function getHighestNumber() {
  let highest = 0;
  // Select the first column of each row
    let firstCol = $("#tbl tr td:first-child");
  firstCol.each( function(index) {
    // Get number in first column
    let num = $(this).html();
    if (num > highest) {
      highest = num;
    }
  });
  return highest;
}

I also created a jsFiddle where you can see it in action: https://jsfiddle.net/texasswede/bh632gjd/

user_12076470 

function appendRow(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(-1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML=(table.rows.length-1);
  for (let i=1;i<firstRow.cells.length;i++){
    cell=row.insertCell(-1)
    switch (i){
      case 1:
        cell.innerHTML="a";
        break;
      case 2:
        cell.innerHTML="2";
        break;
      case 3:
        cell.innerHTML="c";
        break;  
      case 4:
        cell.innerHTML="3";
        break;        
    }
  }  
}
function appendRowTop(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML="1";
  for (let i=0;i<firstRow.cells.length-1;i++){
    cell=row.insertCell(-1)
  } 
  for (let i=2;i<table.rows.length;i++){
    table.rows[i].cells[0].innerHTML=i;
  }
}
<table id="tbl">
        <tr>
            <th>S. No.</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr class="tr">
            <td>1</td>
            <td>Bill</td>
            <td>Gates</td>
            <td>Washington</td>
            <td>U.S</td>
        </tr>
        <tr class="tr">
            <td>2</td>
            <td>Elon</td>
            <td>Mask</td>
            <td>Pretoria</td>
            <td>South Africa</td>
        </tr>
    </table>
    <div onclick="appendRow()" class="btn1">
        <button><b>Add row to bottom</b></button>
    </div>
    <div onclick="appendRowTop()">
        <button class="btn2"><b>Add row to top</b></button>
    </div>

user_197247710 

function appendRow(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(-1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML=(table.rows.length-1);
  for (let i=1;i<firstRow.cells.length;i++){
    cell=row.insertCell(-1)
    switch (i){
      case 1:
        cell.innerHTML="a";
        break;
      case 2:
        cell.innerHTML="2";
        break;
      case 3:
        cell.innerHTML="c";
        break;  
      case 4:
        cell.innerHTML="3";
        break;        
    }
  }  
}
function appendRowTop(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML="1";
  for (let i=0;i<firstRow.cells.length-1;i++){
    cell=row.insertCell(-1)
  } 
  for (let i=2;i<table.rows.length;i++){
    table.rows[i].cells[0].innerHTML=i;
  }
}
<table id="tbl">
        <tr>
            <th>S. No.</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr class="tr">
            <td>1</td>
            <td>Bill</td>
            <td>Gates</td>
            <td>Washington</td>
            <td>U.S</td>
        </tr>
        <tr class="tr">
            <td>2</td>
            <td>Elon</td>
            <td>Mask</td>
            <td>Pretoria</td>
            <td>South Africa</td>
        </tr>
    </table>
    <div onclick="appendRow()" class="btn1">
        <button><b>Add row to bottom</b></button>
    </div>
    <div onclick="appendRowTop()">
        <button class="btn2"><b>Add row to top</b></button>
    </div>

user_197247710 

function appendRow(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(-1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML=(table.rows.length-1);
  for (let i=1;i<firstRow.cells.length;i++){
    cell=row.insertCell(-1)
    switch (i){
      case 1:
        cell.innerHTML="a";
        break;
      case 2:
        cell.innerHTML="2";
        break;
      case 3:
        cell.innerHTML="c";
        break;  
      case 4:
        cell.innerHTML="3";
        break;        
    }
  }  
}
function appendRowTop(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML="1";
  for (let i=0;i<firstRow.cells.length-1;i++){
    cell=row.insertCell(-1)
  } 
  for (let i=2;i<table.rows.length;i++){
    table.rows[i].cells[0].innerHTML=i;
  }
}
<table id="tbl">
        <tr>
            <th>S. No.</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr class="tr">
            <td>1</td>
            <td>Bill</td>
            <td>Gates</td>
            <td>Washington</td>
            <td>U.S</td>
        </tr>
        <tr class="tr">
            <td>2</td>
            <td>Elon</td>
            <td>Mask</td>
            <td>Pretoria</td>
            <td>South Africa</td>
        </tr>
    </table>
    <div onclick="appendRow()" class="btn1">
        <button><b>Add row to bottom</b></button>
    </div>
    <div onclick="appendRowTop()">
        <button class="btn2"><b>Add row to top</b></button>
    </div>

function appendRow(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(-1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML=(table.rows.length-1);
  for (let i=1;i<firstRow.cells.length;i++){
    cell=row.insertCell(-1)
    switch (i){
      case 1:
        cell.innerHTML="a";
        break;
      case 2:
        cell.innerHTML="2";
        break;
      case 3:
        cell.innerHTML="c";
        break;  
      case 4:
        cell.innerHTML="3";
        break;        
    }
  }  
}
function appendRowTop(){
    let cell,firstRow,row;
  let table=document.getElementById("tbl");
  firstRow=table.rows[0];
  row=table.insertRow(1);
  row.className="tr";
  cell=row.insertCell(-1);
  cell.innerHTML="1";
  for (let i=0;i<firstRow.cells.length-1;i++){
    cell=row.insertCell(-1)
  } 
  for (let i=2;i<table.rows.length;i++){
    table.rows[i].cells[0].innerHTML=i;
  }
}
<table id="tbl">
        <tr>
            <th>S. No.</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr class="tr">
            <td>1</td>
            <td>Bill</td>
            <td>Gates</td>
            <td>Washington</td>
            <td>U.S</td>
        </tr>
        <tr class="tr">
            <td>2</td>
            <td>Elon</td>
            <td>Mask</td>
user_197247710
Related