CODEWITHSUNDEEP
javascriptphpjquerydynamichtml-table
Annie
Annie

Reputation: 37

Dynamically delete each row while append row index

I'm kind of confused on how to dynamically delete each row while also updating all row index accordingly, instead of row 1,2,3, while deleting 2, the rows should be append into 1,2, not remained 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);    
}

I edited the code yet I can't even delete a single row... I tried to follow this renumber appended table row in javascript after deleting but it's not working at all...

EDITED: FINALLY it can be deleted and renumber its "number" name attribute after some changes!

Upvotes: 2

Views: 1200

Answers (1)

mighty_mite
mighty_mite

Reputation: 596

Edit: Looks like you need to remove the number from <a href="#" title="" class="remove-author'+number+'">. Just leave it as <a href="#" title="" class="remove-author">.

You also you want to remove the $('.remove-author').each(function(){

jQuery doesn't act on elements that are created dynamically. So you'll want to create a new function and inject it into the <a> element (not the best solution, but it will work without heavily modifying your code)

So your code should be

$(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));
    });
}

now you will want to add this to the <a> element

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

Upvotes: 1

Related Questions