Question

我有一个JS函数，我正在动态创建一组按钮。按钮被放置在行中，这样每次单击一个按钮时，需要将该特定行添加到该分区下面的另一个表中。

我能够成功地将原始表的第一行添加到check division下面的目标表中。所有其他人都没有工作。我不确定为什么没有为所有 Select 按钮调用事件监听器。

动态创建原始表格

for(var q=0;q<attributesNameArray.length;q++)
{
    var chkID = "chkID"+elementID+attributesNameArray[q];
    var aggComboID = "Aggregate-Combo"+q;
    var attrNameID = "attrName"+q;
    var attrTypeID = "attrType"+q;
    var btnID = q+"addSelectedColumnBtn";
    chkname = attributesNameArray[q];
    chkVal = attributesDataTypeArray[q];

    var asNameLbl = "usr"+q;
    asNameid = asNameLbl;

    $("#tableSelectedAttributes").append(
            "<tr>"+
                "<td id='"+attrNameID+"'>"+attributesNameArray[q]+"</td>"+
                "<td id='"+attrTypeID+"'>"+attributesDataTypeArray[q]+"</td>"+
                "<td><input type='text' id='"+asNameid+"'></td>"+
                "<td>"+
                    "<select id='"+aggComboID+"' name='Aggregate-Combo' class='form-control'>"+
                        "<option value='Select an option'>Select an option</option>"+
                        "<option value='MIN'>MIN</option>"+
                        "<option value='MAX'>MAX</option>"+
                        "<option value='SUM'>SUM</option>"+
                        "<option value='AVG'>AVG</option>"+
                        "<option value='COUNT'>COUNT</option>"+
                    "</select>"+
                "</td>"+
                "<td><button id='addSelectedColumnBtn' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+
            "</tr>"+
          "</div>"
     );
}
...

document.getElementById("addSelectedColumnBtn").addEventListener("click", function() {
    displaySelectedColumns(this,fromNameSt);
}, false);

displaySelectedColumns（此，fromNameSt）

   function displaySelectedColumns(sender,fromNameSt)
   {
       var clickedelemId=sender.name;
       q = clickedelemId.charAt(0);


       var aggComboID = "Aggregate-Combo"+q;
       var attrNameID = "attrName"+q;
       var attrTypeID = "attrType"+q;
       var asNameLbl = "usr"+q;
       var selTableId1 = "sel1"+selectedColumnCount;
       var selTableId2 = "sel2"+selectedColumnCount;
       var selTableId3 = "sel3"+selectedColumnCount;
       var selTableId4 = "sel4"+selectedColumnCount;

       var attributeName = document.getElementById(attrNameID).innerText;
       var attributeType = document.getElementById(attrTypeID).innerHTML;
       var selectedAsName = document.getElementById(asNameLbl).value;
       var choice=document.getElementById(aggComboID);
       var selectedAggregate = choice.options[choice.selectedIndex].text;

       alert(attributeName+" "+attributeType+" "+selectedAsName+" "+selectedAggregate);

       if(selectedAggregate == "Select an option")
       {
           if(selectedAsName == "" || selectedAsName == " " || selectedAsName == "null" || selectedAsName == "undefined" ||selectedAsName == null || selectedAsName == undefined)
           {
               alert("As name: false");
               $("#displaySelectedColumnTable").append(
                       "<tr>"+
                       "<td id='"+selTableId1+"'>"+attributeName+"</td>"+
                       "<td id='"+selTableId2+"'>"+attributeType+"</td>"+
                       "<td id='"+selTableId3+"'></td>"+
                       "<td id='"+selTableId4+"'></td>"+
                       "</tr>"
               );
           }
           else
           {
               $("#displaySelectedColumnTable").append(
           ...

这方面的任何建议都将受到高度赞赏。

Answer 1

在您的html页面中，ID必须是唯一的，每个按钮都会重复addSelectedColumnBtn。

首先添加为q元素添加的相同select变量

，使其成为唯一ID

"<td><button id='addSelectedColumnBtn_" + q + "' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+

现在只在所有按钮

的for循环中调用此addEventListener

document.getElementById("addSelectedColumnBtn_" + q).addEventListener("click", function() {
    displaySelectedColumns(this,fromNameSt);
}, false);

通过EventListener调用JS方法

1 个答案: