使用Javascript限制最大表行数

我已经创建了一个表。每单击一个按钮，表中就会添加一个新行。现在我想限制可以创建的最大行数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>

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

试试这个-

var-indx=0； 函数myFunction{ indx++； 如果indx试试这个-

var-indx=0； 函数myFunction{ indx++；

---

ifindx创建一个变量并在每次添加行时更新它，一旦变量达到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
 }

---

创建一个变量并在每次添加行时更新它，一旦变量达到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
 }

---

尝试添加一个要计数的变量。创建一个全局变量“count”，并在每次调用“myFunction”时递增它。在“myFunction”中使用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>

---

尝试添加一个要计数的变量。创建一个全局变量“count”，并在每次调用“myFunction”时递增它。在“myFunction”中使用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>

---

您已经使用这部分代码获得了行数：

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;

演示

var mainBody=document.querySelectortb1.tBodies[0]； document.querySelectorbutton.addEventListenerclick，函数{ var num_rows=mainBody.rows.length； 如果num_rows>9，则返回； var row=mainBody.insertRow； row.insertCell0.textContent=row+num_rows+1； row.insertCell1.textContent=col2； row.insertCell2.textContent=col3； }; 一排 第2列 第3列

---

添加行您已经使用这部分代码获得了行数：

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;

演示

var mainBody=document.querySelectortb1.tBodies[0]； document.querySelectorbutton.addEventListenerclick，函数{ var num_rows=mainBody.rows.length； 如果num_rows>9，则返回； var row=mainBody.insertRow； row.insertCell0.textContent=row+num_rows+1； row.insertCell1.textContent=col2； row.insertCell2.textContent=col3； }; 一排 第2列 第3列

---

添加行使用下面的函数

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

---

使用下面的函数

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

---

只需在脚本部分添加3行代码，其余的都一样

更新的脚本部分是：

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

---

只需在脚本部分添加3行代码，其余的都一样

更新的脚本部分是：

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

---

哦，我认为只有投了赞成票的答案才是正确的：我已经投了你的答案，但我收到了以下通知：谢谢你的反馈！那些声誉低于15的人投的票会被记录下来，但不要改变公开显示的投票结果哦，我认为只有投了赞成票的答案是正确的：我投了你的答案，但我被拒绝了显示以下通知：感谢反馈！记录声誉低于15的人的投票，但不更改公开显示的帖子分数