CODEWITHSUNDEEP
javascripthtmldynamichtml-tablerow
ligma
ligma

Reputation: 9

How to insert the cells inside of each row for a table with a for loop in javascript using insert cell and insert row

function tablefunction(rows, cols) {
    var table = document.getElementById("myTable")
    var row = table.insertRow()
    var cell = row.insertCell()
    for (r = 0; r < rows; r++) {
        table.insertRow(r)
        for (c = 0; c < cols; c++) {
            row.insertCell(c)

current outcome

<tbody>
    <tr>
    <tr>
    <tr>
    <tr>
    <tr>
    <tr>
    <tr>
    <tr>
        <td>
        <td>
        <td>
        <td>
        <td>..... goes on for 64 tds

What i am trying to do is have 8 tds for each TR, but i cant figure out how to do this, because if i have the insertcell in the first for loop, it will do the same thing, if i have the insertcell before the insertrow, it will cause a error because thats not how tables work.

desired outcome:

<tbody>
    <tr>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
    <tr>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
    <tr>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
        <td>
etc etc for 8 trs.

Upvotes: 1

Views: 738

Answers (1)

Mehrzad Tejareh
Mehrzad Tejareh

Reputation: 633

it solved by set current row in first loop.

function tablefunction(rows, cols) {
    var table = document.getElementById("myTable")
    var row = table.insertRow(0);
    var cell = row.insertCell(0);
    for (r = 0; r < rows; r++) {
        row = table.insertRow(r);
    for(c=0;c<cols;c++){
        cell = row.insertCell(0);
        cell.innerHTML = `${r} ${c}`
      }
    }
  }
 tablefunction(4,4);
<table id="myTable" cellspacing="40"></table>

Upvotes: 3

Related Questions