在 DOM 中修改新插入的元素属性时出现问题
Issue in modifying newly inserted element properties in DOM
我有一个按钮函数,它在点击事件时被调用,例如 this.Once clicked,在被点击的行之后立即插入元素的副本 button.I 需要更改 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 未更改。
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>
Fiddle 还有:https://jsfiddle.net/HappyiPhone/r3qhokqn/7/
希望对您有所帮助!
我相信您的逻辑仍然存在一些问题,但这应该会让您走上正轨并清理一些代码。
用这个替换你的 .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 选择器中的元素之间有一个 space($(
和 )
之间的东西)将告诉 JQuery 找到第一个和里面的那个元素,无论您必须遍历多少个子元素,找到指定的第二个元素,然后找到第三个(如果存在),依此类推)。 prop
方法中的大括号表示法告诉 JQuery 您正在传递多个要以对象形式更新的道具。
我有一个按钮函数,它在点击事件时被调用,例如 this.Once clicked,在被点击的行之后立即插入元素的副本 button.I 需要更改 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 未更改。
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>
Fiddle 还有:https://jsfiddle.net/HappyiPhone/r3qhokqn/7/
希望对您有所帮助!
我相信您的逻辑仍然存在一些问题,但这应该会让您走上正轨并清理一些代码。
用这个替换你的 .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 选择器中的元素之间有一个 space($(
和 )
之间的东西)将告诉 JQuery 找到第一个和里面的那个元素,无论您必须遍历多少个子元素,找到指定的第二个元素,然后找到第三个(如果存在),依此类推)。 prop
方法中的大括号表示法告诉 JQuery 您正在传递多个要以对象形式更新的道具。