删除后在javascript中重新编号附加表行

kathleen55
    $('#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,我将如何实现这一目标?感谢您的帮助

这是我动态添加表格的方式

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++;
    });
Mahedi Sabuj

首先删除该行,然后使用$ .each函数更新其他tr

看一下小提琴以获得您的结果: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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用jQuery删除不需要的行后,如何重新编号列表?

来自分类Dev

更改数据后,自动对Access表中的记录重新编号

来自分类Dev

进行数据更改后,自动对Access表中的记录进行重新编号

来自分类Dev

使用jQuery重新编号表行的ID

来自分类Dev

使用jQuery重新编号表行的ID

来自分类Dev

在django中删除行时如何重新编号id

来自分类Dev

在Javascript中重新编号字符串中的整数

来自分类Dev

删除其中之一后重新编号剩余的记录

来自分类Dev

删除文本(使用JavaScript删除)后,无法在元素中重新添加文本(使用JavaScript附加)

来自分类Dev

重新编号HTML中的尾注

来自分类Dev

如何对WordProcessingDocument中的页面重新编号?

来自分类Dev

重新编号HTML中的尾注

来自分类Dev

在tmux中重新编号窗口

来自分类Dev

在python中重新编号列表成员

来自分类Dev

删除导致在删除的消息之后对 Message 对象重新编号

来自分类Dev

如何在 Excel 中对编号的列重新编号

来自分类Dev

如何在大型Excel工作簿中对工作表重新编号?

来自分类Dev

用计数器awk重新编号重复的行

来自分类Dev

在Python中重新编号一维网格

来自分类Dev

如何为对象集合中的字段重新编号?

来自分类Dev

PHP:对数组中的项目重新编号

来自分类Dev

在Linux中重新编号以太网设备

来自分类Dev

重新编号MySQL栏位

来自分类Dev

重新编号PDF页面

来自分类Dev

如何通过jQuery删除行后重新计算HTML表中的序列号

来自分类Dev

在中间删除一条记录后,有没有办法用c#重新编号我的Access表字段?

来自分类Dev

如何删除在 MySQL Query 中未使用重新编码的行

来自分类Dev

熊猫重新编号独特的事件

来自分类Dev

将值重新编号为连续的

Related 相关文章

热门标签

归档