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