Question

我有点混淆如何动态删除每一行，同时也相应地更新所有行索引，而不是行1,2,3，而删除2，行应该追加到1,2，而不是仍然是1,3 ..

jQuery(function(){
    jQuery('a.add-author').click(function(event){
        var number=document.getElementById("noofinputs").value;
        event.preventDefault();
        number++;

        var newRow = jQuery(
            '<tr>'+   
                '<td><textarea class="txtsize" name="item' +number + '" id="item' +number + '" rows="5" cols="32"></textarea></td>'+
                '<td><select name="category' +number + '" id="category' +number + '" style="width:202px;" >'+
                    <?php
                    $q3=mysqli_query($con,"select * from categories ORDER BY category ASC");
                    while ($row3 = mysqli_fetch_assoc($q3)){
                    ?>
                        '<option value="<?php echo $row3['no']; ?>"><?php echo $row3['category']; ?></option>'+
                    <?php
                    } 
                    ?>
                +'</select></td>'+
                '<td>$<input type="text" size="10" name="amount' +number + '" id="amount' +number + '" /></td>'+   
                '<td><a href="#" title="" class="remove-author'+number+'"><img style="cursor: pointer;" height="24px" width="24px;" src="http://../images/Cancel.png" /></a>    </td>'+
            '</tr>');

        jQuery('table.authors-list').append(newRow);
        $('#noofinputs').val(number);
    });
});

$(document).ready(function () {
$(".remove-author").click(function () {
     removeRow(this);
});
});

function removeRow(elem){
var i = 0;
var ii = 0;
var iii = 0;
$(elem).closest('tr').remove();
$("table.authors-list tr").not(':first').each(function (){
    $('td', this).not(':last').each(function() {
    $(this).find('textarea').each(function(){
        $(this).attr('name', 'item' + ( i+1 ));
        i++;
    });
     $(this).find('select').each(function(){
        $(this).attr('name', 'category' + ( ii+1 ));
        ii++;
     });
     $(this).find('input').each(function(){
        $(this).attr('name', 'amount' + ( iii+1 ));
        iii++;
     });
    });
});
var a=document.getElementById("noofinputs").value;
var b = (a - 1);
$('#noofinputs').val(b);    
}

我编辑了代码，但我甚至无法删除一行... 我试着遵循这个renumber appended table row in javascript after deleting 但它根本不起作用......

编辑：最后可以将其删除并重新编号其编号＆＃34;一些更改后的name属性！

Answer 1

修改：您似乎需要从number移除<a href="#" title="" class="remove-author'+number+'">。只需将其保留为<a href="#" title="" class="remove-author">即可。

您还要删除$('.remove-author').each(function(){

jQuery不会对动态创建的元素起作用。因此，您需要创建一个新函数并将其注入<a>元素（不是最佳解决方案，但它可以在不严重修改代码的情况下工作）

所以你的代码应该是

$(document).ready(function () {
    $(".remove-author").click(function () {
         removeRow(this);
    });
});

function removeRow(elem){
    $(elem).closest('tr').remove();

    $("table.authors-list tr").each(function (i){
        var txt = $(this).find('textarea').attr('name');
        $(this).find('textarea').attr('name', txt.replace(/\d+/, i+1)); 
        var sel = $(this).find('select').attr('name');
        $(this).find('select').attr('name', sel.replace(/\d+/, i+1)); 
        var amt = $(this).find('input').attr('name');
        $(this).find('input').attr('name', amt.replace(/\d+/, i+1));
    });
}

现在您需要将其添加到<a>元素

<a href="#" title="" class="remove-author" click="removeRow(this);">

在追加行索引时动态删除每一行

1 个答案: