Question

81

How to create a table using a loop?

rated 0 times [ 82] [ 1] / answers: 1 / hits: 51565 / 10 Years ago, sun, december 21, 2014, 12:00:00

The individual table rows are giving me a problem. I have created what I want using divs but I need to use a table instead of divs. My table has 220 cells, 10 rows, and 22 columns. Each cell has to have the value of i inside the innerHTML. Here is similar to what i want using Divs ( although the cell height and width does not have to be set ):

<!DOCTYPE html>

<html>

    <head>

        <style>

            #container{ 

            width:682px; height:310px; 

            background-color:#555; font-size:85%;

            }



            .cell { 

            width:30px; height:30px;

            background-color:#333; color:#ccc;

            float:left; margin-right:1px;

            margin-bottom:1px;

            }

        </style>

    </head>



    <body>

        <div id=container>

            <script>

                for( var i = 1; i <= 220; i++ ){

                    document.getElementById( 'container' ).innerHTML += 

                    '<div class=cell>' + i + '</div>'

                }

            </script>

        </div>

    </body>

</html>

http://jsfiddle.net/8r6619wL/

This is my starting attempt using a table:

<script>

    for( var i = 0; i <= 10; i++ )

    {

        document.getElementById( 'table' ).innerHTML +=

        '<tr id = row' + i + '><td>...</td></tr>';

    }

</script>

But that code somehow dynamically creates a bunch of tbody elements. Thanks for help as I newb

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keric

Add To Favorites

Follow

Total Points: 572

Total Questions: 93

Total Answers: 97

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

keric questions

1 Event.target.dataset returning undefined javascript

Thu, Dec 2, 21, 00:00, 3 Years ago

1 How to make a horizontal line without using < hr> tag?

Mon, Jul 19, 21, 00:00, 3 Years ago

1 Input with type=number that allows only numbers to be typed

Thu, Jul 15, 21, 00:00, 3 Years ago

1 Does declaring a React.memo inside another functional component provide the memoization performance as it is intended?

Sat, Jan 30, 21, 00:00, 3 Years ago

1 ReactJS useEffect() is running every time on page load

Thu, Nov 5, 20, 00:00, 4 Years ago

View All

answered 10 Years ago jadyngraysons · Accepted Answer

You can do this with nested loops - one to add cells to each row and one to add rows to the table. JSFiddle

var table = document.createElement('table'), tr, td, row, cell;

for (row = 0; row < 10; row++) {

    tr = document.createElement('tr');

    for (cell = 0; cell < 22; cell++) {

        td = document.createElement('td');

        tr.appendChild(td);

        td.innerHTML = row * 22 + cell + 1;

    }

    table.appendChild(tr);

}

document.getElementById('container').appendChild(table);

Alternatively, you can create an empty row of 22 cells, clone it 10 times, and then add the numbers to the cells.

var table = document.createElement('table'),

    tr = document.createElement('tr'),

    cells, i;

for (i = 0; i < 22; i++) { // Create an empty row

    tr.appendChild(document.createElement('td'));

}

for (i = 0; i < 10; i++) { // Add 10 copies of it to the table

    table.appendChild(tr.cloneNode(true));

}

cells = table.getElementsByTagName('td'); // get all of the cells

for (i = 0; i < 220; i++) {               // number them

    cells[i].innerHTML = i + 1;

}

document.getElementById('container').appendChild(table);

And a third option: add the cells in a single loop, making a new row every 22 cells.

var table = document.createElement('table'), tr, td, i;

for (i = 0; i < 220; i++) { 

    if (i % 22 == 0) { // every 22nd cell (including the first)

        tr = table.appendChild(document.createElement('tr')); // add a new row

    }

    td = tr.appendChild(document.createElement('td'));

    td.innerHTML = i + 1;

}

document.getElementById('container').appendChild(table);

Edit - how I would do this nowadays (2021)... with a helper function of some kind to build dom elements, and using map.

function make(tag, content) {

  const el = document.createElement(tag);

  content.forEach(c => el.appendChild(c));

  return el;

}



document.getElementById("container").appendChild(make(

    "table", [...Array(10).keys()].map(row => make(

      "tr", [...Array(22).keys()].map(column => make(

        "td", [document.createTextNode(row * 22 + column + 1)]

    ))

  ))

));