CODEWITHSUNDEEP
javascriptdynamichtml-table
AL-zami
AL-zami

Reputation: 9066

Add id dynamically to each table cells

I am trying to create a dynamic js table and I want to give id to each cell dynamically. I want to use those ids to use in different js event handlers. How it can be done? I have tried in different ways but none of them works!

<html>

<head>
    <style>
        #colors {
            float: right;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <script>
        var d;
        var k = 0;
        function makeit() {
            var tbl = document.createElement("table");
            var atts = document.createAttribute("style");
            atts.value = "border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px;";
            tbl.setAttributeNode(atts);
            for (i = 0; i < 5; i++) {
                var rows = tbl.insertRow(i);

                for (j = 0; j < 7; j++) {
                    d = rows.insertCell(j);
                    d.height = "50px";
                    d.width = "50px";
                    d.style.backgroundColor = "yellow";
                    d.addEventListener("click", function myfunc() { d.style.backgroundColor = "red"; });


                }
            }


            document.body.appendChild(tbl);
        }

        window.onload = makeit;
    </script>
</body>

</html>

Upvotes: 3

Views: 12719

Answers (3)

enhzflep
enhzflep

Reputation: 13089

Using an approach that includes wongcode's solution, you may wish to consider the following code:

<html>
<head>
<style>
#myTbl{ border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px; }
#myTbl td{ width: 50px; height: 50px; background-color: yellow;}
</style>
</head>
<body>
<script>

function onCellClicked(e)
{
    this.style.backgroundColor = 'red';
}

function makeit()
{
    var tbl=document.createElement("table");
    tbl.id = 'myTbl';
    var curCellIndex = 0;
    for(i=0;i<5;i++)
    {
        var rows=tbl.insertRow(i);
        for(j=0;j<7;j++)
        {
            d=rows.insertCell(j);
            d.id = 'cell_' + curCellIndex;
            curCellIndex++;
            d.addEventListener("click",onCellClicked, false);
        }
     }
    document.body.appendChild(tbl);
}

window.onload=makeit;
</script>
</body>
</html>

Some of the advantages include:

  • Smaller html file created in your editor
  • Smaller html code created in the browser
  • Use of context and the this keyword
  • Smaller memory consumption, since each TD doesn't contain the full body of the event handler (it only include a 'pointer' to the function to be executed)

EDIT: forgot to add code to give the cells an id. Now fixed.

Upvotes: 1

Horen
Horen

Reputation: 11382

Just add 

d.id = "r" + i + "c" + j;

under 

d=rows.insertCell(j);

to set unique ids on each td.
Obviously, you can change the syntax r2c4 (which would be 3. row and the 5. cell) to your own liking.

If you want to call a function when clicking on a specific td you could even pass the row index (i) and column index (j) to that function.

Side note
You should consider using a JavaScript library or framework like jQuery for manipulations like this. It would facilitate your work a lot in the long term.

Upvotes: 4

wongcode
wongcode

Reputation: 123

The problem is a scope issue. When adding the event listener, d's reference gets updated to be the last table cell you have created.

You can simply change the event listener's function to:

function myfunc() {
     this.style.backgroundColor="red";
}

So that this references the object it is attached to. Depending on your intention, you may not need unique ids if you have access to the cell itself.

Upvotes: 2

Related Questions