CODEWITHSUNDEEP
javascriptjqueryhtml
user4348719
user4348719

Reputation: 351

Creating a table of divs

I want to create a 16*16 table in html that holds div container in each cell. I'm not sure to what degree I'm allowed to mix jquery and pure javascript but what I have is 

    $( document ).ready(function() {
    var table = Doucument.getElementById('table');
    for (var i = 0; i <16; i++) {
        var row = table.insertRow(i);
        for(var j = 0; j < 16; j++){
            row.insertCell(i);

        }

    };
});

This is adding a row to my table and then adding 16 cells. However I'm not sure how to add the div element to each cell. Perhaps theres a simpler way to do this with jquery? I'm not so proficient in jquery

Upvotes: 0

Views: 496

Answers (3)

Benjamin Ray
Benjamin Ray

Reputation: 1870

Change "Document" to "document", remove the loop indexes (i, j) from the insertRow() and insertCell methods, and capture the newly inserted cell so that you can populate it. I've set each div's ID to be a combination of row and cell number in the example below.

I should also point out that there are better ways to do this. Tables should only be used for displaying data that requires tables. Also, this kind of thing would ideally be done on the server side unless there's a reason for you to do it in JavaScript.

That being said, here is a working example using JavaScript:

HTML:

<table id="myTable"></table>

JavaScript:

$(document).ready(function () {
    var table = document.getElementById('myTable');
    for (var i = 0; i < 16; i++) {
        var row = table.insertRow();
        for (var j = 0; j < 16; j++) {
            var cell = row.insertCell();
            var id = 'r' + i + 'c' + j;
            cell.innerHTML = '<div id="' + id + '">' + id + '</div>';
        }
    };
});

CSS (after reading your comment about controlling size):

#myTable TD DIV {
    height: 30px;
    width: 30px;
}

Demo: http://jsfiddle.net/BenjaminRay/ugm613zg/

Upvotes: 2

Y123
Y123

Reputation: 977

Do you have a specific reason to create a "table" - it is frowned upon by UX and CSS experts. It is considered a better approach to consider creating a table-like layout using Div/Spans and CSS. There are frameworks available that can provide you this layout style out of the box.

One of the most popular ones is Bootstrap's Grid - and here are some layout examples - http://getbootstrap.com/examples/grid/. The benefit of using this approach instead of tables is that your layout will adjust better to screen size changes like say viewing on a mobile device (called responsive layout).

In the interest of full disclosure Bootstrap supports 12 columns out of the box - but modifications are available for 16 and 24 columns - How to use bootstrap with 16 or 24 columns.

This is a longer route but a better solution than tables overall.

Upvotes: 1

lshettyl
lshettyl

Reputation: 8171

And using jQuery, you could do the following.

function addElems(ele, howMany, append) {
    var $items = $();
    for (var i = 0; i < howMany; i++) {
        var $ele = $("<" + ele + "/>");
        typeof append !== "undefined" && $ele.append(append);
        $items = $items.add($ele);
    }
    return $items;
}

var $table = $("#myTable").append("<tbody></tbody>");
var $trs = addElems('tr', 16);
$table.append($trs);

$table.find("tbody > tr").each(function() {
    var $tds = addElems('td', 16, "<div>My Div</div>");
    $(this).append($tds);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable"></table>

Upvotes: 0

Related Questions