限制最大数量。使用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; 
} 

注虽然从表中元素访问将返回所有行数时rows.length，这包括那些可能处于thead，tfoot任何tbody。

所以，如果你最终想要确保thead，tfoot，或者某个tbody有一定的行数，那么你必须从特定元素

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

访问 rows.length

Answer 2

试一试 -

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>

Answer 3

创建一个变量，每次加行的更新，一旦变量达到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 4

尝试添加一个变量进行计数。每次调用'myFunction（）'时，创建一个全局变量'count'并将其加1。在'myFunction（）'中使用if if来控制或限制行。

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

使用您的功能如下，

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

Answer 6

只需添加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; 
}