Значения переключателей удаляются при клонировании в jquery
Я хочу клонировать таблицу (не строку таблицы) с текстовыми полями и переключателями в ней.
Более конкретно, я хочу клонировать всю таблицу без значений текстовых полей, но со значениями переключателей.
Здесь значения текстовых полей и переключателей удаляются при клонировании. Как я могу получить желаемое поведение?
Вот мой код:
<div>
<table id="tablePreviousHistory">
<tbody>
<tr>
<td>
<input id="pCountry" name="pCountry" value="" type="text">
</td>
<td>
<input id="pvisatype" name="pvisatype" value="" type="text">
</td>
<td>
<input id="pstartdate" name="pstartdate" value="" type="text">
</td>
<td>
<input id="pStatus" name="pStatus" value="Yes" type="radio">
Yes<br>
<input id="pStatus" name="pStatus" value="No" type="radio">
No
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
<script>
$("#tablePreviousHistory").clone(true).attr('id', 'tablePreviousHistory' + k).find("input").val('').each(function () {
if (this.type=='radio') {
this.checked = false;
}
$(this).attr({
'id': function (_, id) { return id + k },
'name': function (_, name) { return name + k }
});
}).end().insertAfter("#tablePreviousHistory" + (k != 1 ? (k - 1).toString() : ''));
</script>
3 ответа
Именно из-за того, что при клонировании это не проверяется следующим,
if (this.type=='radio') {
this.checked = false;
}
Текстовые входы очищаются в этой строке кода с val('')
$("#tablePreviousHistory").clone(true).attr('id', 'tablePreviousHistory' + k).find("input").val('').each(function () {
Если вы замените эту строку на следующую, они больше не должны очищаться.
$("#tablePreviousHistory").clone(true).attr('id', 'tablePreviousHistory' + k).find("input").each(function () {
Я думаю, что нашел проблему с помощью этого ответа
Вот моя функция для клонирования строки таблицы, она должна помочь в аналогичной проблеме.
/**
* Add QC Row
*
* @param element $ele
* @param integer $currentRowIndex
*
* @return void
*/
function addRow(ele,currentRowIndex) {
let row = $(ele).parents("tr");
let clone = $(row).clone(true); // copy children too
$(clone).find(".parameter_test_text_value").val('');
$(clone).find(".parameter_test_min_value").val('');
$(clone).find(".parameter_test_max_value").val('');
$(clone).find(".remark").val('');
$(clone).find(".add-param").addClass('displayNone');
$(clone).find(".remove-param").removeClass('displayNone');
//First change the name index for the cloned row so that it does not disturb other
//values
$(clone).find('input[type=radio]').each(function () {
let str = this.name;
let str_split = str.split('[');
str_split[1] = str_split[1].replace(']', '');
str_split[2] = str_split[2].replace(']', '');
str_split[3] = !empty(str_split[3]) ? str_split[3].replace(']', '') : '';
let mainid ='';
if(!isNaN(str_split[2])){
mainid = str_split[0]+"["+str_split[1]+"][20000000]["+str_split[3]+"]";
} else {
// Remove numbers by first regexp
mainid = str_split[0]+"[20000000]["+str_split[2]+"]";
}
this.name = mainid;
$(this).val('').trigger('change');
});
//Create new index first before cloning so that the values are retained
let parameterAllRows = $(".container-itemprameter tr");
$.each(parameterAllRows, function(index) {
index+=200000;
$(this).find('input[name^="QiParameterTestResult"]').each(function () {
let str = this.name;
let str_split = str.split('[');
str_split[1] = str_split[1].replace(']', '');
str_split[2] = str_split[2].replace(']', '');
str_split[3] = !empty(str_split[3]) ? str_split[3].replace(']', '') : '';
let mainname='';
if(!isNaN(str_split[2])){
mainname = str_split[0]+"["+str_split[1]+"]["+index+"]["+str_split[3]+"]";
} else {
// Remove numbers by first regexp
mainname = str_split[0]+"["+index+"]["+str_split[2]+"]";
}
$(this).prop('name',mainname);
});
});
//Now insert the row
$(row).after(clone);
//Now rearrange the indexes properly
parameterAllRows = $(".container-itemprameter tr");
$.each(parameterAllRows, function(index) {
$(this).find('input[id^="QiParameterTestResult-"]').each(function () {
let str = this.id;
let str_split = str.split('-');
let mainid='';
if(!isNaN(str_split[2])){
mainid = str_split[0]+"-"+str_split[1]+"-"+index+"-"+str_split[3];
} else {
// Remove numbers by first regexp
mainid = str_split[0]+"-"+index+"-"+str_split[2];
}
$(this).prop('id',mainid);
});
$(this).find('input[name^="QiParameterTestResult"]').each(function () {
let str = this.name;
let str_split = str.split('[');
str_split[1] = str_split[1].replace(']', '');
str_split[2] = str_split[2].replace(']', '');
str_split[3] = !empty(str_split[3]) ? str_split[3].replace(']', '') : '';
let mainname='';
if(!isNaN(str_split[2])){
mainname = str_split[0]+"["+str_split[1]+"]["+index+"]["+str_split[3]+"]";
} else {
// Remove numbers by first regexp
mainname = str_split[0]+"["+index+"]["+str_split[2]+"]";
}
$(this).prop('name',mainname);
});
});
}
Я скопировал весь код как есть, чтобы было проще понять, что именно нужно сделать.