在每个表行中添加要选择的选项

Add option to select in each table row

本文关键字：选择 选项 添加      更新时间：2023-09-26

我有一个表，每一行都有一些'select '。

我需要遍历每个表行，并将"选项"追加到数组中的选择。目前，只有表中的第一个'select'填充来自数组的数据。

我有以下HTML:

<table id="myTable">
<thead>
    <tr>
        <th>Code</th>
        <th>Date</th>
        <th>Description</th>
        <th>Percentage</th>
    </tr>
</thead>
<tbody>
    <tr class="RepeatingSection">
        <td>
            <select id="InputCode"></select>
        </td>
        <td>
            <input type="date" name="Date" id="DateInput" required="required" />
        </td>
        <td>
            <input type="text" id="DetailsInput" name="Details" size="35" required="required" />
        </td>
        <td>
            <input type="number" id="percentageInput" max="100" value="100" />%</td>
    </tr>
    <tr class="RepeatingSection">
        <td>
            <select id="InputCode"></select>
        </td>
        <td>
            <input type="date" name="Date" id="DateInput" required="required" />
        </td>
        <td>
            <input type="text" id="DetailsInput" name="Details" size="35" required="required" />
        </td>
        <td>
            <input type="number" id="percentageInput" max="100" value="100" />%</td>
    </tr>
    <tr class="RepeatingSection">
        <td>
            <select id="InputCode"></select>
        </td>
        <td>
            <input type="date" name="Date" id="DateInput" required="required" />
        </td>
        <td>
            <input type="text" id="DetailsInput" name="Details" size="35" required="required" />
        </td>
        <td>
            <input type="number" id="percentageInput" max="100" value="100" />%</td>
    </tr>
</tbody>

我目前有以下JavaScript:

var array;
var i;
var option;
var select;
array = [001, 002, 003, 004];
for (i = 0; i < array.length; i++) {
  option = document.createElement("option");
  option.value = array[i];
  option.text = array[i];
  select = document.getElementById("InputCode");
  $('#myTable .RepeatingSection').each(function() {
    $(this).find('#InputCode').each(function() {
      select.appendChild(option);
    })
  })
  select.appendChild(option);
}

Please also see my fiddle

任何帮助都会很感激。

试试下面的JavaScript代码:

var array;
var i;
var option;
array = [001, 002, 003, 004];
for (i = 0; i < array.length; i++) {
    option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
    $('#myTable .RepeatingSection').find( "select[id=InputCode]" ).append(option);
}
相关文章：