制限最大数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

、そうでない場合は、別のものを追加せずに戻るだけです。

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

これを試す - 変数が10に達すると、新しい行を追加停止、

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

変数を作成し、行の各添加してそれを更新

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

カウントする変数を追加してみてください。グローバル変数 'c​​ount'を作成し、 'myFunction（）'が呼び出されるたびにそれをインクリメントします。行を制御または制限するには、 'myFunction（）'のif elseを使用します。

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

ので、別の行を追加するのであれば、ちょうどその数が10未満であるかどうかを確認するためにxをチェック：あなたはすでにあなたの行は、あなたのコードのこの部分を数えるなっている

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