[英]How to count rows on dynamically created rows with javascript
我正在嘗試建立一個可以創建新行並刪除它們的系統,我想擁有一個計數器來對每行的行數進行計數。
我想在“數字”下顯示行號,但是我不知道該怎么做。
編輯
在這里看到我的小提琴: https : //jsfiddle.net/pr05dw6p/14/
HTML代碼:
<div class="row">
<div class="large-8 large-offset-2 columns">
<h2>This is the table</h2>
<form method="post">
<table id="myTable" class="hover large-12 columns">
<thead>
<tr>
<th>Num.</th>
<th>Name</th>
<th>Height</th>
<th>Width</th>
</tr>
</thead>
<tbody id="bannerTable">
<tr>
<td><p></p></td>
<td><input type="text" name="name"></td>
<td><input type="number" name="height"></td>
<td><input type="number" name="width"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="row">
<div class="large-4 large-offset-2 columns">
<button class="button expanded" onclick="newRow()">Add new row</button>
</div>
<div class=" large-4 columns">
<button class="alert button expanded" onclick="deleteRow()">Delete latest row</button>
</div>
</div>
JS代碼:
//CREATE NEW BANNER - TABLE ROW COUNTER
$('#bannerTable tr').each(function(idx){
$(this).children().first().html(idx + 1);
});
//CREATE NEW BANNER - CREATE ROW
function newRow() {
var table = document.getElementById("bannerTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var element1 = document.createElement('p');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement('input');
element2.type="text", name="name";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement('input');
element3.type="number", name="height";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement('input');
element4.type="number", name="width";
cell4.appendChild(element4);
}
//CREATE NEW BANNER - DELETE ROW
function deleteRow(){
var table = document.getElementById("bannerTable");
var rowCount = table.rows.length;
if(rowCount>1){
table.deleteRow(-1);
}
}
要計算行數,可以使用:
var row_count = $('#bannerTable tr').length;
您可以在newRow()的末尾調用它,而deleteRow()則將結果附加到例如div。
您可以通過使用其他答案中所述獲得表行的長度(計數)
table.getElementsByTagName("tr").length
這將得到計數,您可以通過調用element1.innerHTML = table.getElementsByTagName("tr").length
將其放入生成的p
標簽的html中element1.innerHTML = table.getElementsByTagName("tr").length
我還建議在沒有預設tr
情況下在頁面初始化上運行newRow()
函數。 當您插入一行時,行數也將有所幫助,以便它總是在先前插入的行之后插入一行,並保持Num.
列也很干凈。
查看此更新的小提琴: https : //jsfiddle.net/pr05dw6p/19/
我們需要進行以下更改:
在Javascript代碼中,我們需要計算表的TR並將其值放在table.insertRow(row_count);中。 之后,我們需要增加值並將其添加到新的<P>
標記中。
<tbody id="bannerTable"> <tr> <td><p>1</p></td> <td><input type="text" name="name"></td> <td><input type="number" name="height"></td> <td><input type="number" name="width"></td> </tr> </tbody>
JavaScript代碼
//CREATE NEW BANNER - CREATE ROW
function newRow() {
var table = document.getElementById("bannerTable");
var row_count = document.getElementById("bannerTable").rows.length;
var row = table.insertRow(row_count);
row_count = row_count+1;
var cell1 = row.insertCell(0);
var element1 = document.createElement('p');
element1.innerHTML = row_count;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement('input');
element2.type="text", name="name";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement('input');
element3.type="number", name="height";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement('input');
element4.type="number", name="width";
cell4.appendChild(element4);
}
var row_count = $('#myTable tbody tr').length.length;
在添加和刪除行功能之后調用此函數
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.