修改DOM

时间：2017-04-26 17:08:42

标签： jquery dom insertafter

我有一个按钮的功能，在这样的点击事件上调用。一旦点击，在点击按钮的行后立即插入元素的副本。我需要更改一些元素的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（）时，警报显示的是chaned值，但DOM未更改。

FIDDLE https://jsfiddle.net/anazvak/r3qhokqn/6/

2 个答案:

答案 0 :(得分：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/

希望它有所帮助！

答案 1 :(得分：1)

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

将error函数替换为此函数：

.more_button

由于您只是复制已经在DOM上的元素，因此您可以使用JQuery的$(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--; }); 方法替换逻辑以重新创建元素。然后，在当前行之后插入新克隆的行并更新其属性。

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

相关问题
最新问题