CODEWITHSUNDEEP
javascripthtml
Arnab
Arnab

Reputation: 418

Limit maximum no. of table rows using Javascript

I have created a table. On every button click a new row is added in the table. Now I want to limit the maximum number of rows (10) that can be created. I want to do this using Javascript. Help is appreciated.

Here is my code till now:

    <div id="div1" class="container input-group">

    <input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
    <button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
    <input type="submit" name="sub1" id="sub1" class="btn btn-success">

    <table border="1" id="tb1" class="table table-bordered">
    <tr>
    <td>Sr. No.</td>
    <td>Value</td>
    <td id="td3">Action</td>
    </tr>
    </table>

    </div>


    <script type="text/javascript">
    function myFunction() {



    var table = document.getElementById("tb1");
    var text1 = document.getElementById("textbox1").value;
    var x = document.getElementById("tb1").rows.length;

    var row = table.insertRow();
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    cell2.innerHTML = text1;

    for (var i = 0; i < x; i++) {

    cell1.innerHTML = i;
    }

    cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';

    }

    </script>

Now I just want to limit the no. of rows which can be created by button click.

Upvotes: 1

Views: 12575

Answers (6)

brk
brk

Reputation: 50291

Create a variable and update it with each addition of row, Once the variable reach 10, stop adding new row

var countRow = 0; // variable to track the row count
function myFunction() {
if(countRow<=10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;

  var row = table.insertRow();
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell2.innerHTML = text1;

  for (var i = 0; i < x; i++) {

    cell1.innerHTML = i;
  }

  cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
countRow++; // increase variable by 1
 }

DEMO

Upvotes: 2

Patrick Evans
Patrick Evans

Reputation: 42736

You are already getting your row count with this part of your code:

var x = document.getElementById("tb1").rows.length;

So just check x to see if that count is less than 10 if so add another row, if not then just return without adding another.

if(x > 9){
   return;
}

Note though that rows.length when accessed from your table element will return the number of all rows, this includes those that might be in a thead,tfoot and any tbody.

So if you end up wanting to make sure thead,tfoot, or a certain tbody has a certain number of rows then you have to access rows.length from that particular element

//For thead
var num_rows = document.querySelector("#tb1").tHead.rows.length;
//For tbody, [0] swap 0 with the whichever tbody index you want to check
var num_rows = document.querySelector("#tb1").tBodies[0].rows.length;
//For tFoot
var num_rows = document.querySelector("#tb1").tFoot.rows.length;

Demo

var mainBody = document.querySelector("#tb1").tBodies[0];

document.querySelector("button").addEventListener("click", function() {
  var num_rows = mainBody.rows.length;
  if (num_rows > 9) return;

  var row = mainBody.insertRow();
  row.insertCell(0).textContent = "Row "+(num_rows+1);
  row.insertCell(1).textContent = "Col 2";
  row.insertCell(2).textContent = "Col 3";
});
<table id="tb1">
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
</table>

<button>Add Row</button>

Upvotes: 3

Rajdeep
Rajdeep

Reputation: 802

Just add 3 lines to your script part, rest will be same. Jsfiddle here 

1 - var totalRows = 0;

2 - if(totalRows <=  10)

3 - totalRows = totalRows + 1;

Updated script part is :

var totalRows = 0;
function myFunction() {
if(totalRows <=  10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;

var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell2.innerHTML = text1;

for (var i = 0; i < x; i++) {

cell1.innerHTML = i;
}

cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';

}
totalRows = totalRows + 1;
}

Upvotes: 2

Vickyexpert
Vickyexpert

Reputation: 3167

Use your function as below,

<script>

   var totalCount = 0;

   function myFunction() {

      if(totalCount >= 10)
      {
         alert("You can add only 10 records");
         return false;
      }
      else
      {
         totalCount++;
         //your function for Adding Data
         return true;
      }
    }

   //Also Manage your funDel() function if you want like below

   function funDel()
   {
      //Your code for deletion
      totalCount--;
   }
</script>

Upvotes: 0

Rohith K N
Rohith K N

Reputation: 871

Try adding a variable to count. Make a global variable 'count' and increment it every time when 'myFunction()' is called. use an if else in 'myFunction()' to control or limit the rows.

<input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
<button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
<input type="submit" name="sub1" id="sub1" class="btn btn-success">

<table border="1" id="tb1" class="table table-bordered">
<tr>
<td>Sr. No.</td>
<td>Value</td>
<td id="td3">Action</td>
</tr>
</table>

</div>


<script type="text/javascript">
var count=0;
    function myFunction() {
count++;
if(count<11)
{


    var table = document.getElementById("tb1");
    var text1 = document.getElementById("textbox1").value;
    var x = document.getElementById("tb1").rows.length;

    var row = table.insertRow();
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    cell2.innerHTML = text1;

    for (var i = 0; i < x; i++) {

    cell1.innerHTML = i;
    }

    cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';

  }  }
 </script>

Upvotes: 1

Chetan
Chetan

Reputation: 942

Try This - 

var indx = 0;  
function myFunction() {


    indx++;
    if(indx<=10){
   
    var table = document.getElementById("tb1");
    var text1 = document.getElementById("textbox1").value;
    var x = document.getElementById("tb1").rows.length;

    var row = table.insertRow();
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    cell2.innerHTML = text1;

    for (var i = 0; i < x; i++) {

    cell1.innerHTML = i;
    }

    cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';

    }
   }
    <div id="div1" class="container input-group">

    <input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
    <button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
    <input type="submit" name="sub1" id="sub1" class="btn btn-success">

    <table border="1" id="tb1" class="table table-bordered">
    <tr>
    <td>Sr. No.</td>
    <td>Value</td>
    <td id="td3">Action</td>
    </tr>
    </table>

    </div>

Upvotes: 1

Related Questions