[FIXED] How to get the values ​from a table (option value)

Issue

have this table in html , in columns (col6 and col7) I have elements

I would like to get all data from the table according to the options selected in the columns (col6 and col7)

my function even does the job well taking all the data from the table and storing it in an array, the big problem is that I can't get only the selected value inside the columns (col 6 and Col7 ) I've tried several ways, but it always gets all the elements inside the

function save_Table(){

    var myData = document.getElementById('tab').rows;

      data = []
        for (var i = 1; i < myData.length; i++) {
              el = myData[i].children
                my_el = []

                  for (var j = 0; j < el.length; j++) {
                      my_el.push(el[j].textContent );
                  }
                        data.push(my_el)
          }
  console.log(data)
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }

<table id="tab">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th>Col 6</th>
            <th>Col 7</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>TEST</td>
            <td>123</td>
            <td>TEST</td>
            <td>Text</td>
            <td>5</td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select></td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">2</option>
                </select></td>
        </tr>
        <tr>
            <td>TEST</td>
            <td>124</td>
            <td>TEST</td>
            <td>Text</td>
            <td>6</td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select></td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">2</option>
                </select></td>
        </tr>
    </tbody>
</table>

<button onclick="save_Table()">Teste</button>

Solution

Element.textContent literally grabs the text, and you need the value property of the child select form. A guard clause in your nested for loop should do the trick:

if (el[j].children[0]?.tagName == 'SELECT') {
    my_el.push(el[j].children[0].value);
    continue;  
}

function save_Table(){
    var myData = document.getElementById('tab').rows;

    let data = []
    for (var i = 1; i < myData.length; i++) {
      let el = myData[i].children
      let my_el = []

      for (var j = 0; j < el.length; j++) {
          if (el[j].children[0]?.tagName == 'SELECT') {
            my_el.push(el[j].children[0].value);
            continue;  
          }

          my_el.push(el[j].textContent);
      }
      data.push(my_el)
    }
  console.log(data)
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }

<table id="tab">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th>Col 6</th>
            <th>Col 7</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>TEST</td>
            <td>123</td>
            <td>TEST</td>
            <td>Text</td>
            <td>5</td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select></td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">2</option>
                </select></td>
        </tr>
        <tr>
            <td>TEST</td>
            <td>124</td>
            <td>TEST</td>
            <td>Text</td>
            <td>6</td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select></td>
            <td><select class="browser-default">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">2</option>
                </select></td>
        </tr>
    </tbody>
</table>

<button onclick="save_Table()">Teste</button>

Answered By - itsisaac19

Answer Checked By - David Marino (PHPFixing Volunteer)