修改 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--;
    });

当我在修改元素的 ID 和名称后检查 alert() 时，警报显示已更改的值，但 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);
	 $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 您正在传递多个要以对象形式更新的道具。