在表中添加新行以使脚本不仅在第一行与新行中的元素连接时的方式是什么？

Question

在表中添加新行以使脚本不仅在第一行与新行中的元素连接时的方式是什么？ 该脚本仅与第一行中的元素“文本框”连接

 function GetSelectedvalues (el) {
            var select = document.getElementsByClassName ('js-example-basic-multiple')[0];
            var result = "";
            var options = select && select.options;
            var opt;
            for (var i = 0; i < select.options.length; i++) {
                opt = options[i];
                var isSelected = select.options[i].selected;
                isSelected = (isSelected)? opt.value : "0";
                result +=    isSelected  ;
            }

            document.getElementById ('textbox').value=result;

        }

//add row
function addmaintable() {

    $('#datatablereqstsched').append(
        '<tbody>' +
        '<tr class="parent" id="parent">' +

// here text box
        '<td width="60%"><div class="input-group"> <label class="ckbox mg-t-10" title="Daily" ><input type="checkbox" id="chk1"  onclick="check(\'chk1\')" ><span calss="mg-t-0">Daily</span>  </label><div class="input-group-prepend" style="width:80%"><select class="js-example-basic-multiple col-md-4 form-control" name="states[]" multiple="multiple"style="width: 100%" onchange="GetSelectedvalues(event);" > <option value="1">MON</option> <option value="2">TUE</option> <option value="3">WED</option> <option value="4">THU</option><option value="5">FRI</option><option value="6">SAT</option><option value="7">SUN</option> </select></div><input type="text" class="form-control txtv" value="" placeholder="0000000" id="textbox" disabled></div> </td>' +
        '</tr>' +
        '</tbody>');

        $('.js-example-basic-multiple').select2();

    }
 function check(chk) {
            var checkb = document.getElementById(chk);
            if (checkb.checked == true) {
                document.getElementById('textbox').value = "1234567";
                $(".js-example-basic-multiple").prop("disabled", true);
            }
            else {
                document.getElementById('textbox').value = "0000000";
                $(".js-example-basic-multiple").prop("disabled", false);
                $(".js-example-basic-multiple").val(null).trigger('change');
            }
        }

Answer 1

每次调用GetSelectedvalues function 时，您都明确地针对第一个 select：

var select = document.getElementsByClassName ('js-example-basic-multiple')[0];

我认为您应该利用 event 参数来获取当前变化的 select：

const tBody = '<tbody>'
+    '<tr class="parent" id="parent">'
+        '<td width="60%">'
+            '<div class="input-group">'
+                '<label class="ckbox mg-t-10" title="Daily">'
+                    '<input type="checkbox" id="chk1"  onclick="check(\chk1\)" >'
+                    '<span calss="mg-t-0">Daily</span>'
+                '</label>'
+                '<div class="input-group-prepend" style="width:80%">'
+                    '<select class="js-example-basic-multiple col-md-4 form-control" name="states[]" multiple="multiple" style="width: 100%" onchange="GetSelectedvalues(event);">'
+                        '<option value="1">MON</option>'
+                        '<option value="2">TUE</option>'
+                        '<option value="3">WED</option>'
+                        '<option value="4">THU</option>'
+                        '<option value="5">FRI</option>'
+                        '<option value="6">SAT</option>'
+                        '<option value="7">SUN</option>'
+                    '</select>'
+                '</div>'
+                '<input type="text" class="form-control txtv" value="" placeholder="0000000" id="textbox" disabled>'
+            '</div>'
+        '</td>'
+    '</tr>'
+'</tbody>'

function GetSelectedvalues(event) {
    // Here you are selecting only the first select with the class "js-example-basic-multiple"
    var select = document.getElementsByClassName('js-example-basic-multiple')[0];
    // You are better off selecting the current changing select using the argument event
    select = event.target;
    var result = "";
    var options = select && select.options;
    var opt;
    for (var i = 0; i < select.options.length; i++) {
        opt = options[i];
        var isSelected = select.options[i].selected;
        isSelected = (isSelected) ? opt.value : "0";
        result += isSelected;
    }
    document.getElementById('textbox').value = result;
}

//add row
function addmaintable() {
    $('#datatablereqstsched').append(tBody);
    $('.js-example-basic-multiple').select2();
}

编辑
现在您需要一种方法来了解要更新哪个文本框，基于当前更改的 select。 对于所有其他输入也是如此，例如顶部的复选框。
一种方法可能是这样：

 const tBodyTemplate = '<tbody>' + '<tr class="parent" id="parent">' + '<td width="60%">' + '<div class="input-group">' + '<label class="ckbox mg-t-10" title="Daily">' + '<input type="checkbox" id="chk" onclick="check(chk)" >' + '<span calss="mg-t-0">Daily</span>' + '</label>' + '<div class="input-group-prepend" style="width:80%">' + '<select data-target="textbox" class="js-example-basic-multiple col-md-4 form-control" name="states[]" multiple="multiple" style="width: 100%" onchange="GetSelectedvalues(event);">' + '<option value="1">MON</option>' + '<option value="2">TUE</option>' + '<option value="3">WED</option>' + '<option value="4">THU</option>' + '<option value="5">FRI</option>' + '<option value="6">SAT</option>' + '<option value="7">SUN</option>' + '</select>' + '</div>' + '<input type="text" class="form-control txtv" value="" placeholder="0000000" id="textbox" disabled>' + '</div>' + '</td>' + '</tr>' +'</tbody>' function GetSelectedvalues(event) { // Here you are selecting only the first select with the class "js-example-basic-multiple" var select = document.getElementsByClassName('js-example-basic-multiple')[0]; // You are better off selecting the current changing select using the argument event select = event.target; var textboxId = select.dataset.target; var result = ""; var options = select && select.options; var opt; for (var i = 0; i < select.options.length; i++) { opt = options[i]; var isSelected = select.options[i].selected; isSelected = (isSelected)? opt.value: "0"; result += isSelected; } document.getElementById(textboxId).value = result; } let rowCount = 0; //add row function addmaintable() { rowCount++; var tBody = tBodyTemplate.replace(/textbox/g, 'textbox' + rowCount).replace(/chk/g, 'chk' + rowCount); $('#datatablereqstsched').append(tBody); } function check(v) { console.log(v); } $('#add-row').click(addmaintable);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="datatablereqstsched"></table> <button id="add-row">Add one row</button>