title: Limit maximum no. of table rows using Javascript
body: <p>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.</p>
  
  <p>Here is my code till now:</p>
  
  <pre><code>    &lt;div id="div1" class="container input-group"&gt;
  
      &lt;input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center"&gt;
      &lt;button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()"&gt;Add&lt;/button&gt;
      &lt;input type="submit" name="sub1" id="sub1" class="btn btn-success"&gt;
  
      &lt;table border="1" id="tb1" class="table table-bordered"&gt;
      &lt;tr&gt;
      &lt;td&gt;Sr. No.&lt;/td&gt;
      &lt;td&gt;Value&lt;/td&gt;
      &lt;td id="td3"&gt;Action&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;/div&gt;
  
  
      &lt;script type="text/javascript"&gt;
      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 &lt; x; i++) {
  
      cell1.innerHTML = i;
      }
  
      cell3.innerHTML = '&lt;input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)"&gt;';
  
      }
  
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Now I just want to limit the no. of rows which can be created by button click.</strong></p>