Значения переключателей удаляются при клонировании в 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);
        });
    });
}

Я скопировал весь код как есть, чтобы было проще понять, что именно нужно сделать.

Другие вопросы по тегам