CODEWITHSUNDEEP
javascripthtmlarrayshtml-table
Adam13Hylo
Adam13Hylo

Reputation: 117

Add option to select in each table row

I have a table with a number of 'selects' in each table row.

I need to iterate through each table row and append 'options' to the selects from an array. Currently only the first 'select' in the table is populated with data from the array.

I have the following 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>

I currently have the following 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

Any help would be appreciated. Hope this post makes sense.

Upvotes: 0

Views: 1117

Answers (1)

user5299490
user5299490

Reputation:

Try following JavaScript code:

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);
}

Upvotes: 1

Related Questions