Can't loop through table in javascript

Question

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?

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
– Karl-Johan Sjögren, Commented Mar 28, 2022 at 9:12

Floz42 · Accepted Answer · 2022-03-28 09:56:35Z

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

answered Mar 28, 2022 at 9:56

Floz42

295 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Omar Abdelrazik Over a year ago

thanks, that worked! But this gets the whole select dropdown options not the selected one. Is there a way to filter this out?

Athavan · Accepted Answer · 2022-03-28 09:18:12Z

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?

answered Mar 28, 2022 at 9:18

Athavan

211 silver badge5 bronze badges

2 Comments

Omar Abdelrazik Over a year ago

The table is already defined as you mentioned. I edited the question for clarity.

Athavan Over a year ago

I see. Yes then you have to add the html tags <tr> <td>

Collectives™ on Stack Overflow

Can't loop through table in javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related