在DOM中修改新插入的元素属性的问题

Question

我有一个按钮的功能，这是像这样的点击事件被调用。一旦点击，一个元素的副本被插入点击按钮的行后立即。我需要改变新插入行中某些元素的ID和名称。

<tr class="tr_38"> 
     <td>Maths [ Math01 ]</td> 
     <td>Required</td> 
     <td> 
      <select style="width: 250px;" name="TeacherID[2318]" id="TeacherID[2318]"> 
      <option selected="" value="132">Dawn Herus - [ID : 132]</option> 
      <option value="246">Margaret Wilson - [ID : 246]</option> 
      </select> 
     </td> 
     <td> 
      <input class="date hasDatepicker" id="ExamDate_2318" name="ExamDate[2318]" value="02/28/2017" type="text"> 
      <input style="width: 100px;" id="ExamTime_2318" name="ExamTime[2318]" value="8:00" type="text"> 
     </td> 
     <td><input value="+" class="more-38-0 more_button" type="button"> 
     </td> 
     </tr> 

Jquery的功能：

var counter = -1; 
    $(document).on ('click','.more_button',function(){ 
     var courseID=''; 
     var row_classname = $(this).closest('tr').prop('class'); 
     $.each($(this).prop('class').split(' '), function(i, name) { 
      if (name.indexOf('more-') > -1) { 
       courseID = name.split('-')[1]; 
       return false; 
      } 
     }); 
      var newrow = '<tr class="'+row_classname+'"><td>'+$(this).parent().parent().find('td:eq(0)').text()+ 
      '</td><td>'+$(this).parent().parent().find('td:eq(1)').text()+ 
      '</td><td>'+$(this).parent().parent().find('td:eq(2)').html()+'</td><td>'+ 
      $(this).parent().parent().find('td:eq(3)').html()+'</td><td><input type="button" value="+" class="more-'+ 
      courseID+'-1 more_button"><input type="button" class="remove" value="X">'+ 
      '</td></tr>'; 

      $newrow = $(newrow); 
      $(newrow).insertAfter($(this).closest('tr')); 
      $newrow.find('td:eq(2)').find('select').prop('id','TeacherID['+counter+']');//.prop('name','TeacherID['+counter+']'); 
      alert($newrow.find('td:eq(2)').html()); 
      $newrow.find('td:eq(3)').find('input[id^="ExamDate_"]').prop('id','ExamDate_'+counter).prop('name','ExamDate['+counter+']'); 
      $newrow.find('td:eq(3)').find('input[id^="ExamTime_"]').prop('id','ExamTime_'+counter).prop('name','ExamTime['+counter+']'); 
      alert($newrow.find('td:eq(3)').html()); 
      $(this).hide(); 
      counter--; 
    }); 

当我检查警报（）修改元件，该警报是显示chaned值的ID和名称之后，但在DOM不改变。

FIDDLEhttps://jsfiddle.net/anazvak/r3qhokqn/6/

Answer 1

var counter = -1; 
 
     $(document).on ('click','.more_button',function(){ 
 
      var courseID=''; 
 
      var row_classname = $(this).closest('tr').prop('class'); 
 
      $.each($(this).prop('class').split(' '), function(i, name) { 
 
       if (name.indexOf('more-') > -1) { // or name.indexOf('toaster') === 0 
 
        courseID = name.split('-')[1]; 
 
        return false; 
 
       } 
 
      }); 
 
       var newrow = $('<tr class="'+row_classname+'"><td>'+$(this).parent().parent().find('td:eq(0)').text()+ 
 
       '</td><td>'+$(this).parent().parent().find('td:eq(1)').text()+ 
 
       '</td><td>'+$(this).parent().parent().find('td:eq(2)').html()+'</td><td>'+ 
 
       $(this).parent().parent().find('td:eq(3)').html()+'</td><td><input type="button" value="+" class="more-'+ 
 
       courseID+'-1 more_button"><input type="button" class="remove" value="X">'+ 
 
       '</td></tr>'); 
 
       var $newrow = $(newrow); 
 
\t $newrow.find('td:eq(2)').find('select').prop('id','TeacherID['+counter+']').prop('name','TeacherID['+counter+']'); 
 
       //alert($newrow.find('td:eq(2)').html()); 
 
       $newrow.find('td:eq(3)').find('input[id^="ExamDate_"]').prop('id','ExamDate_'+counter).prop('name','ExamDate['+counter+']'); 
 
       $newrow.find('td:eq(3)').find('input[id^="ExamTime_"]').prop('id','ExamTime_'+counter).prop('name','ExamTime['+counter+']'); 
 
       $(newrow).insertAfter($(this).closest('tr')); 
 
       $(this).hide(); 
 
       counter--; 
 
     }); 
 
     
 
     $(document).on ('click','.remove',function(){ 
 
      var length = 0; 
 
      $('.'+$(this).closest('tr').prop('class')).not(this.closest('tr')).each(function(){ 
 
       if($(this).find('td:eq(4)').find('.more_button:visible').length) 
 
       { 
 
        length += $(this).find('td:eq(4)').find('.more_button:visible').length; 
 
       } 
 
      }); 
 
      if(length == 0) 
 
      { 
 
       $(this).closest('tr').prev('tr').find('td:eq(4)').find(':hidden').show(); 
 
       $(this).closest('tr').remove(); 
 
      } 
 
      else 
 
      { 
 
       $(this).closest('tr').remove(); 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr class="tr_38"> 
 
                <td>Maths [ Math01 ]</td> 
 
                <td>Required</td> 
 
                <td> 
 
                 <select style="width: 250px;" name="TeacherID[2318]" id="TeacherID[2318]"><option selected="" value="132">Dawn Herus - [ID : 132]</option><option value="246">Margaret Wilson - [ID : 246]</option></select> 
 
                </td> 
 
                <td> 
 
                 <input class="date hasDatepicker" id="ExamDate_2318" name="ExamDate[2318]" value="02/28/2017" type="text"> 
 
                 <input style="width: 100px;" id="ExamTime_2318" name="ExamTime[2318]" value="8:00" type="text"> 
 
                </td> 
 
                <td><input value="+" class="more-38-0 more_button" type="button"></td> 
 
               </tr> 
 
               <tr class="tr_290"> 
 
                <td>Arabic 2 [ Arab 2 ]</td> 
 
                <td>Elective</td> 
 
                <td> 
 
                 <select style="width: 250px;" name="TeacherID[2326]" id="TeacherID[2326]"></select> 
 
                </td> 
 
                <td> 
 
                 <input class="date hasDatepicker" id="ExamDate_2326" name="ExamDate[2326]" value="02/28/2017" type="text"> 
 
                 <input style="width: 100px;" id="ExamTime_2326" name="ExamTime[2326]" value="8:00" type="text"> 
 
                </td> 
 
                <td><input value="+" class="more-290-0 more_button" type="button"></td> 
 
               </tr> 
 
</table>

小提琴以及：https://jsfiddle.net/HappyiPhone/r3qhokqn/7/

希望它能帮助！

Answer 2

我相信你的逻辑还是有一些问题，但这应该让你开始正确的轨道并清理你的一些代码。

与此一替换您.more_button功能：

$(document).on ('click','.more_button',function(){ 
    var courseID=''; 
    var row_classname = $(this).closest('tr').prop('class'); 
    $.each($(this).prop('class').split(' '), function(i, name) { 
     if (name.indexOf('more-') > -1) { // or name.indexOf('toaster') === 0 
      courseID = name.split('-')[1]; 
      return false; 
     } 
    }); 

    var closestTr = $(this).closest('tr'); 
    var newrow = closestTr.clone(); 

    $(newrow).insertAfter(closestTr); 

    var $newrow = $($(closestTr).next()); // Get the row you just added 

    // set the id and name 
    $newrow 
    .find('td:eq(2) select') 
     .prop('id','TeacherID['+counter+']') 
      .prop('name','TeacherID['+counter+']'); 

    alert($newrow 
      .find('td:eq(2)') 
       .html()); 

    $newrow 
    .find('td:eq(3) input[id^="ExamTime_"]') 
     .prop({ 
       'id' : 'ExamTime_'+counter, 
       'name':'ExamTime['+counter+']' 
      }); 

    alert($newrow 
      .find('td:eq(3)') 
      .html()); 

    $(this).hide(); 
    counter--; 
}); 

既然你只是拷贝上已有的DOM可以更换你的逻辑重建具有JQuery的clone方法元素的元素。然后，将新克隆的行插入当前行并更新其属性。

注意我改变了你的find和prop来电要更简洁。在你的JQuery选择器（$(和)之间的东西）之间有一个空格可以告诉JQuery找到该元素的第一个元素和里面，无论你必须遍历多少个子元素，找到指定的第二个元素，然后第三个元素如果存在，等等）。 prop方法中的括号表示法告诉JQuery你传递了多个道具以对象的形式进行更新。