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