使用jQuery删除和更新表行

Question

我是jQuery的新手，因此请耐心等待，我为我的拙劣编码深表歉意。

我的代码的逻辑很简单，或者至少是目标。

jQuery脚本检查类型字段，然后获取其值并构建表。 一切都100％有效。

当删除行，然后更新通过单击新行按钮生成的新附加行的表ID时，就会出现问题。

新行不会删除。

这是代码，但我也创建了一个jsfiddle，因此您可以实时检查它，但是网站上还没有一些错误-例如，出于某些原因，您需要双击该按钮才能使其正常工作

JS：

$('.purchase-order-button').on('click', function(){

    var buildcotable = '';
    var buildtrs = $('#formentry15').val();
    var coArray = '';
    var coArrayNumber = 1;

    buildcotable += '<div class="table-responsive">';
    buildcotable += '<table class="table table-bordered">';

    buildcotable += '<thead>';
    buildcotable += '<th class="text-center">CO Number</th>';
    buildcotable += '<th class="text-center">CO Price</th>';
    buildcotable += '<th class="text-center">Options</th>';
    buildcotable += '</thead>';

    buildcotable += '<tbody id="jquerypotable">';

    //lets do a check and see how many are listed
    if(buildtrs.indexOf(',') !== -1){

        coArray = buildtrs.split(',');

        $.each(coArray, function(){

            var splitCoArray = this.split('=');
            var coArrayPrice = splitCoArray[1].trim().replace('£', '');
            var coArrayCode = splitCoArray[0].trim();

            buildcotable += '<tr id="jqueryporow'+coArrayNumber+'">';
            buildcotable += '<td><input type="text" value="'+coArrayCode+'" id="jqueryponumber'+coArrayNumber+'" class="form-control"></td>';
            buildcotable += '<td><input type="text" value="'+coArrayPrice+'" id="jquerypovalue'+coArrayNumber+'" class="form-control"></td>';
            buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo'+coArrayNumber+'">Delete CO Number</a></td>';
            buildcotable += '</tr>';

            coArrayNumber += 1;

        });

    } else {

        if(buildtrs == '' || buildtrs == 'TBC'){

            buildcotable += '<tr id="jqueryporow1">';
            buildcotable += '<td><input type="text" value="" id="jqueryponumber1" class="form-control"></td>';
            buildcotable += '<td><input type="text" value="" id="jquerypovalue1" class="form-control"></td>';
            buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo1">Delete CO Number</a></td>';
            buildcotable += '</tr>';

        } else {

            var splitSingleCoArray = buildtrs.split('=');
            var coSinglePrice = splitSingleCoArray[1].trim().replace('£', '');
            var coSingleCode = splitSingleCoArray[0].trim();

            buildcotable += '<tr id="jqueryporow1">';
            buildcotable += '<td><input type="text" value="'+coSingleCode+'" id="jqueryponumber1" class="form-control"></td>';
            buildcotable += '<td><input type="text" value="'+coSinglePrice+'" id="jquerypovalue1" class="form-control"></td>';
            buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo1">Delete CO Number</a></td>';
            buildcotable += '</tr>';

        }

    }

    buildcotable += '</tbody>';

    buildcotable += '</table>';
    buildcotable += '<p><a href="#" class="btn btn-default btn-block" id="addnewpo">Add New CO Number</a></p>';
    buildcotable += '<p><a href="#" class="btn btn-danger btn-block" id="ubldonepo">Done</a></p>';
    buildcotable += '</div>';

    $('.ubl-section-7').html(buildcotable);

    $('.ubl-section-7').show();
    $('.model-background').fadeIn(500);

    //add new row
    $('#addnewpo').on('click', function(e){

        e.preventDefault();

        var numPoRows = $("#jquerypotable > tr").length;
        var makeNewRowNum = numPoRows + 1;

        var createnewporow = '<tr id="jqueryporow'+makeNewRowNum+'">';

        createnewporow += '<td><input type="text" value="" id="jqueryponumber'+makeNewRowNum+'" class="form-control"></td>';
        createnewporow += '<td><input type="text" value="" id="jquerypovalue'+makeNewRowNum+'" class="form-control"></td>';
        createnewporow += '<td class="text-center"><a class="btn btn-danger delete-co-row-new" id="deletepo'+makeNewRowNum+'">Delete CO Number</a></td>';

        createnewporow += '</tr>';

        $('#jquerypotable').append(createnewporow);

    });

    //delete row
    $('#jquerypotable > tr').on('click', '.delete-co-row', function(e){

        e.preventDefault();

        var getCoId = $(this).attr('id');
        var coLastChar = parseInt(getCoId.substr(getCoId.length - 1));
        var coHowManyRows = parseInt($("#jquerypotable > tr").length);
        var makeMinusId = '';
        var newi = coLastChar;

        if(coLastChar == coHowManyRows){

            $('#jqueryporow'+coLastChar).remove();

        } else {

            //before removing rows we need to rebuild the information given.
            for(newi; newi <= coHowManyRows; newi++){

                if(newi == coLastChar){

                    $('#jqueryporow'+newi).remove();

                } else {

                    makeMinusId = (newi - 1);

                    $('#jqueryporow'+newi).attr('id', 'jqueryporow'+makeMinusId);
                    $('#jqueryponumber'+newi).attr('id', 'jqueryponumber'+makeMinusId);
                    $('#jquerypovalue'+newi).attr('id', 'jquerypovalue'+makeMinusId);
                    $('#deletepo'+newi).attr('id', 'deletepo'+makeMinusId);

                }

            }

        }

    });

});

在此处输入链接说明

非常感谢任何帮助

Answer 1

您在页面初始化时向删除按钮添加了一个eventListener ，但是在创建行时没有再次这样做。 我建议将以下代码添加到您的addnewpo按钮：

$('#addnewpo').on('click', function(e){
  // your original code here
  //...

  //now add an event listener to the new deletebuttons
  $('#jquerypotable > tr').on('click', '.delete-co-row-new', function(e){

    e.preventDefault();
    $(this).closest('tr').remove();
  });
});

Answer 2

我发现了问题，问题是删除tr所需的侦听器。

所以代替：

/now add an event listener to the new deletebuttons
$('#jquerypotable > tr').on('click', '.delete-co-row', function(e){

它必须是：

/now add an event listener to the new deletebuttons
$('#jquerypotable').on('click', '.delete-co-row', function(e){

谢谢大家的帮助：）