删除后在javascript中重新编号附加表行 [英] renumber appended table row in javascript after deleting
本文介绍了删除后在javascript中重新编号附加表行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
$('#mhTable').on('click', '.DeleteRow', function()
{
if(confirm("Are you sure you want to delete this?")) {
$(this).closest('tr').remove();
count --;
}
else {
return false;
}
});
我有这些代码来删除表行,我的问题是当我删除数字之间的行时,例如,我有4行,而我删除了#2行,行的编号将像1,3,4 ..但我需要成为1,2,3,我将如何实现这一目标?谢谢您的帮助
hi i have these code to delete a table row, my problem is that when i delete a row that is in between the numbers, for example i have 4 rows and i delete row#2 the numbering of the rows will be like 1,3,4.. but i need it to be 1,2,3 how will i achieved this? thank you for your help
这是我动态添加表格的方式
here's how i add the tables dynamically
var rowCount = $('#mhTable >tbody >tr').length;
var count = rowCount + 1;
var host = window.location.protocol + "//" + window.location.host + "/" + "\files/Icons/delete.png";
$('#mhAddRow').click(function(e)
{
$("#mhTable tr:last").after('<tr id="row' + count + '">'
+ '<td> <sup> <img class="DeleteRow" style="cursor:pointer;" id="rowDelete" name="rowDelete" height="7" width="7" src="'+host+'"> </sup> <input type="text" id="rowsID'+count+'" name="rows['+count+']" style="width:73%;text-align:center;" value="'+count+'" readOnly="readonly"> </input> </td>'
+ '<td> <input type="text" style="width:98%;" id="process" class="process" name="process['+count+']" value=""> </input> </td>'
+ '<td> <input type="text" style="width:96%;" id="PIC" class="PIC" name="PIC['+count+']" value="" > </input> </td> '
+ '<td> <input type="text" style="width:95%;text-align:right;" id="prev" class="prev" name="prev['+count+']" onkeyup="ManhourSaving();totalmhPrevious();ManhourSavingRatio();mhInMinutes();savedMHyearly();costAnnual()" onkeypress="return isNumberKey(event)" maxlength="5" value="" ></input> </td> '
+ '<td> <input type="text" style="width:95%;text-align:right;" id="expect" class="expect" name="expect['+count+']" class="expected" onkeyup="ManhourSaving();totalmhExpected();ManhourSavingRatio();mhInMinutes();savedMHyearly();costAnnual()" onkeypress="return isNumberKey(event)" maxlength="5" value="" > </input> </td> '
+ '<td> <input type="text" style="width:96%;text-align:right;" id="mhSavings" class="mhSavings" name="mhSavings['+count+']" readOnly="readonly" value="0.00" > </input> </td> '
+ '<td> <input type="text" style="width:95%;text-align:right;" id="ratio" class="ratio" name="ratio['+count+']" readOnly="readonly" value="0.00" > </input> </td> '
+ '<td> <input type="text" style="width:95%;text-align:right;" id="PaperReducPrev" class="PaperReducPrev" name="PaperReducPrev['+count+']"onkeyup="PaperReductionPrevious();PaperReduction();PaperReductionRatio();totalPaperReduced();paperReductionyearly();costSheet()" onkeypress="return isNumberKey(event)" maxlength="5" value="" > </input> </td>'
+ '<td> <input type="text" style="width:95%;text-align:right;" id="PaperReducExpect" class="PaperReducExpect" name="PaperReducExpect['+count+']" onkeyup="PaperReductionExpected();PaperReduction();PaperReductionRatio();totalPaperReduced();paperReductionyearly();costSheet()" onkeypress="return isNumberKey(event)" maxlength="5" value="" > </input> </td>'
+ '<td> <input type="text" style="width:96%;text-align:right;" id="paperReduced" class="paperReduced" name="paperReduced['+count+']" readOnly="readonly" value="0"> </input> </td> '
+ '<td> <input type="text" style="width:95%;text-align:right;" id="PaperReducRatio" class="PaperReducRatio" name="paperReducRatio['+count+']" readOnly="readonly" value="0.00" > </input> </td> ');
$.post('mis.php/new_development_request/loadView_newDevelopmentRequest', {counter: count});
count++;
});
推荐答案
首先删除该行,然后使用 $.each 函数
Remove the row first then update other tr using $.each function
看看小提琴来获得结果: https://jsfiddle.net/hL625r4p/
Take a look at the fiddle to get your result: https://jsfiddle.net/hL625r4p/
$(document).ready(function () {
$("button").click(function () {
$(this).closest('tr').remove();
$(".row-id").each(function (i){
$(this).text(i+1);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
<tr>
<td class='row-id'>1</td>
<td>Row 1</td>
<td><button>Delete</button></td>
</tr>
<tr>
<td class='row-id'>2</td>
<td>Row 2</td>
<td><button>Delete</button></td>
</tr>
<tr>
<td class='row-id'>3</td>
<td>Row 3</td>
<td><button>Delete</button></td>
</tr>
<tr>
<td class='row-id'>4</td>
<td>Row 4</td>
<td><button>Delete</button></td>
</tr>
</table>
这篇关于删除后在javascript中重新编号附加表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文