Question

当前，我有此设置。我的页面加载时有两个相邻对齐的下拉列表和一个ADD按钮。 ADD按钮使用功能addRow（）在下一行中添加一个下拉列表。该功能可能是最糟糕的实现。

a）我希望添加按钮将2个类似的下拉列表添加到下一行，这些下拉列表与页面最初的位置相邻。（现在，代码仅在下一行添加1个下拉菜单）

b）有什么方法可以将我的ADD按钮放在下拉列表的下方，而不是放在下拉列表的第一行旁边？

下面是代码

<div class="container">
        <table>
                <tr>



<td>
<select id="soflow">
  <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
  <option>Select an Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select id="soflow">
    <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>

 <button class = "button" type="button" onClick ="addRow(this)">Add</button></td>

</tr>
</table>

</div>

<script>
    function addRow(btn) {         
        var parentRow = btn.parentNode.parentNode;
        var table = parentRow.parentNode;
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        //var element2 = document.createElement("input");
        var element2 = document.createElement("select");
        element2.setAttribute("id", "soflow")
        //element2.type = "select";
        var option1 = document.createElement("option");
        option1.innerHTML = "Option1";
        option1.value = "1";
        element2.add(option1, null);
        var option2 = document.createElement("option");
        option2.innerHTML = "Option2";
        option2.value = "2";
        element2.add(option2, null);
        cell1.appendChild(element2);
    }
</script>

谢谢您的帮助。

Answer 1

您可以使用for循环两次以创建两个select。如果希望按钮始终位于选择项（添加项和初始项）下，同时将新行添加到表中，则应将按钮移到表外。

此外，一个元素id不能超过一个。最初，您有2个元素带有id“ soflow”，并且将在单击Add按钮时添加更多元素。

要计算已添加的select个数，您只需要一个全局变量，该变量每次运行函数内的for循环时就增加一个。

<div class="container">
        <table id="selectTable">
                <tr>



<td>
<select id="soflow">
  <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
  <option>Select an Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select id="soflow2">
    <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
<br/>
 </td>

</tr>
</table>
<button class = "button" type="button" onClick ="addRow(this)">Add</button>
</div>

<script>
    var addedSelects = 0;//total number of dropdowns added
    function addRow(btn) {         
        var table = document.getElementById('selectTable');
        var soflow = document.getElementById("soflow2");
        var rowCount = table.rows.length;
        var row = document.createElement('tr');
        table.appendChild(row);
        //var element2 = document.createElement("input");
        var td = document.createElement('td');
        row.appendChild(td);
        for(let i = 0; i < 2; i++){
        var element2 = document.createElement("select");
        //element2.setAttribute("id", "soflow"+(i+1))
        //element2.type = "select";
        var option1 = document.createElement("option");
        option1.innerHTML = "Option1";
        option1.value = "1";
        element2.add(option1, null);
        var option2 = document.createElement("option");
        option2.innerHTML = "Option2";
        option2.value = "2";
        element2.add(option2, null);
        td.appendChild(element2);
        addedSelects++;
        }
    }
</script>

Answer 2

您有两个具有相同名称的ID。更改ID属性，使两个选择的元素（如<select id="soflow1"> && <select id="soflow2">）具有不同的名称，并在Javascript中将每个元素引用为soflow1或soflow2。您的JavaScript引用了两个ID元素，并导致一个调用打开两个下拉菜单。

ID应该仅对一个元素唯一。

要对所有下拉元素使用相同的样式，请添加一个类属性，该属性与两个选择元素（例如<select id="soflow1" class="myDropdownClass"> && <select id="soflow2" class="myDropdownClass">）相同，并为.myDropdownClass { //some style }创建CSS

要将按钮放在选择元素的下方，您可以在表格中执行此操作...

<table>
    <tr>
        <td><select id="soflow1" class="myDropdownClass" ... /></td>
        <td><select id="soflow2" class="myDropdownClass" ... /></td>
    </tr>
    <tr>
        <td colspan="2"><button>text</button></td>
    </tr>
</table>

Answer 3

将 id 授予要克隆的<tr>和表。然后使用cloneNode()克隆行并将其附加到表中。

<div class="container">
        <table id="myTable">
                <tr id="initialRow" class="select_row">



<td>
<select id="soflow" class="select1">
  <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
  <option>Select an Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select id="soflow"  class="select2">
    <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>

</td>

</tr>
</table>
<button class = "button" type="button" onClick ="addRow()">Add</button>
<button class = "button" type="button" onClick ="getValues()">Print values</button>
</div>

<script>
    const table = document.querySelector('#myTable');
    const rowToDuplicate = document.querySelector('#initialRow');
    function addRow() { 
      var duplicate = rowToDuplicate.cloneNode(true);
   duplicate.removeAttribute('id');      table.appendChild(duplicate);
    }
    
    function getValues() {
      const rows = document.querySelectorAll('.select_row');
     rows.forEach((row, i) => {
       console.log(`row ${i}: select1 `, row.querySelector('.select1').value);   console.log(`row ${i}: select2 `,row.querySelector('.select2').value);
     })
     
    }
</script>

Answer 4

我喜欢将事件侦听器添加到表中，因为单击将使dom树冒泡。然后检查是否有一个名为“ add”类的元素调用了该事件。如果是，则克隆表的行节点并将其附加到表主体。我还将按钮放在表格页脚中，因此它始终位于底部。希望这会有所帮助。

此方法还允许您更改表的结构，而无需重写javascript以正确爬上dom树。添加了仅适用于S＆G的删除行按钮。

以类似的方式获取值而在每个select元素上都没有ID，您可以将solflow元素列表中的elements索引用作唯一标识符和值。

由于要通过克隆行来创建动态元素，因此需要将solflow的事件侦听器添加到新的select元素中，或者表可以处理change事件，在这种情况下，只需一次添加更改处理程序和solflow无论何时添加元素，都可以改变气泡。以类似的方式，可以使用表单击处理程序创建提交按钮，该表单击处理程序从表中的solflow元素中获取所有值，并将它们索引为solflow元素的数量，作为键值存储或与顺序匹配的solflow值数组元素出现的位置。

ViewModel

Answer 5

这应该可以解决问题

function addRow() {         
    //Select the table
    var table = document.getElementsByTagName('table')[0];
    //Append a row
    table.innerHTML = table.innerHTML + '<tr>\
        <td>\
            <select>\
                <option>Select an Option</option>\
                <option>Option 1</option>\
                <option>Option 2</option>\
            </select>\
            <select>\
                <option>Select an Option</option>\
                <option>Option 1</option>\
                <option>Option 2</option>\
            </select>\
        </td>\
    </tr>';              
}

<div class="container">
    <table>
        <tr>
            <td>
                <select>
                    <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
                    <option>Select an Option</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>

                <select>
                    <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
                    <option>Select an Option</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </td>  
        </tr>
    </table>
    <button class = "button" type="button" onClick ="addRow()">Add</button>
</div>

ADD按钮始终位于底部，因为我将其移出了表格。我删除了选择标签上的ID，重复的ID会给您带来错误，请尝试使用document.getElementsByTagName('select')[x]选择器并使用0（其中x）来获得第一个下拉列表，{{1} }获得第二个...我也只是使用文本而不是通过JS创建元素，因为我认为它们更易于阅读，创建和修改。如果您有任何疑问，请问。

单击按钮时出现重复的下拉菜单

5 个答案: