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); 

       } 

      } 

     } 

    }); 

}); 

enter link description here

任意の助けを感謝してあなたが追加

Answer 1

を受信しますページの初期化時に削除ボタンにeventListenerを追加しましたが、行を作成するときにもう一度実行しませんでした。

$('#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を削除するために必要なリスナーだった、問題が見つかりました：私はあなたのaddnewpoボタンに次のコードを追加することをお勧めします。

ので代わりに：[これを読んでください、て苦労する:)