限制最大数量。使用Javascript的表行

Question

我创建了一个表。在每个按钮上单击表中添加的新行。现在我想限制可以创建的最大行数（10）。我想用Javascript做到这一点。感谢帮助。

这是我的代码，直到现在：

    <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>

现在我只想限制一下。可以通过按钮单击创建的行。

Answer 1

您已使用此部分代码获取行数：

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

所以，只需检查x以查看该计数是否小于10，如果是，则添加另一行，如果没有，则只返回而不添加另一行。

if(x > 9){
   return;
}

请注意，从您的table元素访问时rows.length将返回所有行的数量，其中包括可能位于thead，tfoot和任何tbody中的行数。 }。

因此，如果您最终想要确保thead，tfoot或某个tbody有一定数量的行，那么您必须从中访问rows.length特殊要素

//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;

演示

＆＃13;

＆＃13;

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";
});

＆＃13;

<table id="tb1">
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
</table>

<button>Add Row</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

创建一个变量并在每次添加行时更新它，一旦变量达到10，就停止添加新行

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

Answer 3

只需在脚本部分添加3行，其余部分相同。 Jsfiddle here

1 - var totalRows = 0;

2 - if(totalRows <=  10)

3 - totalRows = totalRows + 1;

更新的脚本部分是：

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;
}

Answer 4

试试这个 -

＆＃13;

＆＃13;

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)">';

    }
   }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

尝试添加变量以进行计数。制作一个全局变量＆＃39; count＆＃39;每次当myFunction（）＆＃39;叫做。在'myFunction（）＆＃39;中使用if else控制或限制行。

<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>

Answer 6

使用您的功能，如下所示

<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>