使用javascript动态行编号 [英] Dynamic row numbering using javascript
本文介绍了使用javascript动态行编号的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在单击添加和删除按钮时提供动态行号,但在删除任何行之间,它没有提供正确的行号.我在表(数据表)中的 td 是:
I am trying to give a dynamic row number while clicking add and delete button, but in between I delete any row it is not giving proper row_number. My td in table(dataTable) is:
echo "<td> 1 <input type='hidden' name='task_number[]' value='1'> </td>";
添加和删除 btn :
ADD and delete btn :
echo "<input type='button' value='Add Task' onClick=addRow('dataTable') /> ";
echo "<INPUT type='button' value='Delete Task' onclick=deleteRow('dataTable') />";
在 JavaScript 中:
in javascript:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length -1;
var inps = document.getElementsByName('task_number[]');
var inp=inps[rowCount-1].value; // array start from 0
inp = ++inp;
var cell2 = row.insertCell(1);
cell2.innerHTML = inp;
}
推荐答案
使用这个功能
function setRowNumber()
{
$('#tablename tbody tr').each(function (idx) {
$(this).children("td:eq(1)").html(idx + 1);
});
}
我还放了动态表代码.如果选中该复选框,则可以删除该行.
orderTable();
function addRow()
{
var rowCount = $('#example tr').length;
if(rowCount == 1)
{
var tr = "<tbody><tr id='tr'><td><input type='checkbox' id='chk' name='chk' value='chk'></td>" + "<td></td><td>Task Designer</td></tr></tbody>";
$('#example thead:last').after(tr);
}
else
{
var tr = "<tr id='tr'><td><input type='checkbox' id='chk' name='chk' value='chk'></td>" + "<td></td><td>Task Designer</td></tr>";
$('#example tr:last').after(tr);
}
orderTable();
}
function deleteRow()
{
var i = 0;
$('#example input[type=checkbox]').each(function(){
if($(this).is(":checked"))
{
$('#tr' + (i + 1)).remove();
}
i = i + 1;
});
$('#example input[type=checkbox]').each(function(){
$(this).prop('checked', false);
});
orderTable();
}
function orderTable()
{
var rowCount = $('#example tbody tr').length;
if(rowCount > 0)
{
$('#example tbody tr').each(function (idx) {
var num = idx + 1;
$(this).children("td:eq(1)").html(num);
$(this).children("td:eq(2)").html('Task Designer' + num);
$(this).attr('id','tr' + num);
//set input names
$(this).children("td:eq(0)").children().attr('id','chk' + num);
$(this).children("td:eq(0)").children().attr('name','chk' + num);
$(this).children("td:eq(0)").children().attr('value','chk' + num);
});
}
}
#example
{
border:1px solid #ddd;
border-collapse: collapse;
}
th
{
background:#333;
color:white;
font-weight:bold;
height:40px;
}
td
{
text-align: center;
vertical-align: middle;
border:1px solid #ddd;
height:40px;
}
<input type='button' id="btnAdd" value='Add Task' onclick="addRow()" />
<input type='button' id="btnRemove" value='Delete Task' onclick="deleteRow()" />
<table id="example" class="display" cellspacing="0" width="100%" border="0">
<thead>
<tr>
<th>Select</th>
<th>Task Number</th>
<th>Task Description</th>
</tr>
</thead>
<tbody>
<tr id="tr">
<td><input type="checkbox" id="chk" name="chk" value="chk"></td>
<td>11</td>
<td>Task Designer</td>
</tr>
<tr id="tr">
<td><input type="checkbox" id="chk" name="chk" value="chk"></td>
<td>2</td>
<td>Task Designer</td>
</tr>
<tr id="tr">
<td><input type="checkbox" id="chk" name="chk" value="chk"></td>
<td>3</td>
<td>Task Designer</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
这篇关于使用javascript动态行编号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文