0

I am new to javascript and am currently trying to loop through table rows to get the data from it however its showing an error that it can't recognize rows for table.

 <div class="row" id="tablediv">
        <div class="col">
            <table class="table table-striped table-bordered" id="table"/>
        </div>
    </div>


    var table = document.getElementById('#table');

for (let i in table.rows) {
       let row = table.rows[i];
       //iterate through rows
       //rows would be accessed using the "row" variable assigned in the for loop
        console.log(row);
       for (let j in row.cells) {
         let col = row.cells[j];
         //iterate through columns
         //columns would be accessed using the "col" variable assigned in the for loop
           console.log(col);
       }
    }


offices:1048 Uncaught TypeError: Cannot read properties of null (reading 'rows')
    at save (offices:1048:25)
    at HTMLButtonElement.onclick (offices:101:84)

Am I doing something wrong or is there a workaround for that?

Omar Abdelrazik
  • 683
  • 2
  • 9
  • 30
  • As the error says, you are trying to read the `rows` property on a null object. So `table` is null when you start your loop. How are you setting the `table` variable? – Karl-Johan Sjögren Mar 28 '22 at 09:12

2 Answers2

1

Your table variable must be declare before. You can do this :

<table id="myTab1">
    <thead>
      <tr>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr class="rowTable">
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr class="rowTable">
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr class="rowTable">
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
</table>
<script>
var table = document.getElementById("myTab1");
for (let i = 0; i < table.rows.length; i++) {
    let row = table.rows[i]
    for (let j = 0; j < row.cells.length; j++) {
        let cell = row.cells[j];
        console.log(cell.textContent)
    }  
}
Floz42
  • 29
  • 5
  • thanks, that worked! But this gets the whole `select` dropdown options not the selected one. Is there a way to filter this out? – Omar Abdelrazik Mar 28 '22 at 10:08
0

You have to target the table first. With var table = document.getElementById("myTable");, you can store in a variable table and then loop through.

In your example, this would look like var table = document.getElementById("table");

Also check this How do I iterate through table rows and cells in JavaScript?

Athavan
  • 21
  • 5