I have an HTML table created with dynamically generated data with each row having different IDs. Each row contains 3 columns where 2 are text input fields and 1 is select field.

What I want to do is to get all content of each row of table but I'm unable to get selected option's value. I'm using a for loop to iterate through each column value of every row.

I'm getting correct values for the first two input fields but the select field is giving undefined value.

How to get the selected option value for each select field?

function getData(){
  var table = document.getElementById("dataTable");
    for (var i = 1, row; row = table.rows[i]; i++) {
        var x = row.cells[0].childNodes[0].value;
        var y = row.cells[1].childNodes[0].value;
        var z = row.cells[2].childNodes[0].value; // select option field
        
    }
}

<td><input value="first" id="first1" name="first[]" /></td>
<td><input value="second" id="second1" name="second[]" /></td>
<td>
  <select name="third[]" id="third1">
    <option value="option1">One</option>
    <option value="option2">Two</option>
  </select>
</td>

I have an HTML table created with dynamically generated data with each row having different IDs. Each row contains 3 columns where 2 are text input fields and 1 is select field.

What I want to do is to get all content of each row of table but I'm unable to get selected option's value. I'm using a for loop to iterate through each column value of every row.

I'm getting correct values for the first two input fields but the select field is giving undefined value.

How to get the selected option value for each select field?

function getData(){
  var table = document.getElementById("dataTable");
    for (var i = 1, row; row = table.rows[i]; i++) {
        var x = row.cells[0].childNodes[0].value;
        var y = row.cells[1].childNodes[0].value;
        var z = row.cells[2].childNodes[0].value; // select option field
        
    }
}

<td><input value="first" id="first1" name="first[]" /></td>
<td><input value="second" id="second1" name="second[]" /></td>
<td>
  <select name="third[]" id="third1">
    <option value="option1">One</option>
    <option value="option2">Two</option>
  </select>
</td>

• javascript
• html
• html-table
• cell

Share Improve this question Follow edited Mar 29, 2017 at 13:31 srd091 asked Mar 29, 2017 at 13:27 srd091srd091 5511 gold badge44 silver badges1010 bronze badges 3

• JavaScript uses zero-based indices; which means that the first cell is at index 0, not 1, and the last cell is at index 2, not 3. – David Thomas Commented Mar 29, 2017 at 13:30
• element.options[element.selectedIndex].value – Abhitalks Commented Mar 29, 2017 at 13:31
• @DavidThomas thanks for pointing out, that was a typo. – srd091 Commented Mar 29, 2017 at 13:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The select field appears to be the second child of the table cell and hence is accessed by childNodes[1].

Demonstration of the first case:

function getData(){
  var table = document.getElementById("dataTable");
    var row;
    for (var i = 0,  row = table.rows[i]; i < table.rows.length ;i++) {
        console.log('here')
        var x = row.cells[0].childNodes[0].value;
        var y = row.cells[1].childNodes[0].value;
        var z = row.cells[2].childNodes[1].value; // select option field
        console.log(x,y,z)
    }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dataTable">
<tr>
<td><input value="first" id="first1" name="first[]" /></td>
<td><input value="second" id="second1" name="second[]" /></td>
<td>
  <select name="third[]" id="third1">
    <option value="option1">One</option>
    <option value="option2">Two</option>
  </select>
</td>
</tr>
</table>
<button onclick="getData()">Click</button>

The reason this happened was because you hadextra spaces between <td> <select>. Remove them and it can be accessed with childNodes[0]

function getData(){
  var table = document.getElementById("dataTable");
    
    var row;
    for (var i = 0,  row = table.rows[i]; i < table.rows.length ;i++) {
        var x = row.cells[0].childNodes[0].value;
        var y = row.cells[1].childNodes[0].value;
        var z = row.cells[2].childNodes[0].value; // select option field
        
    }
}

<table id="dataTable">
<tr>
<td><input value="first" id="first1" name="first[]" /></td>
<td><input value="second" id="second1" name="second[]" /></td>
<td><select name="third[]" id="third1">
    <option value="option1">One</option>
    <option value="option2">Two</option>
</select>
</td>
</tr>
</table>
<button onclick="getData()">Click</button>

You also need to end you for loop and hence put a condition on number of rows