我正在尝试创建一个可以创建新行并删除它们的系统,我想要一个计数器来计算每个单独行的行号。
在“Num”下,我想显示行号,但我不知道该怎么做。
编辑
- 我发现一个 jQuery 片段似乎计算了我的第一行,但不计算新创建的行。
- 使用 jQuery 代码片段更新了 Fiddle
- 更新了 JS 代码,并在顶部添加了代码段
在这里查看我的 fiddle :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。
关于javascript - 如何使用 javascript 对动态创建的行进行计数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34769233/