Creating a dynamic table with Jquery

Question

I am creating a dynamic table with Jquery, I have dynamic number of rows and columns of the table. I want to print some text in the FIRST column of all the rows but some other control in rest of the columns. How should I find if its the first column if the row?

EDIT
Actually I am trying to write my text at the same time I am creating the table. I guess I should first create my table with blank rows and columns and then put in the text?

Some code of what you are trying to achieve and what you have tried would help. — jammykam
– jammykam, Commented Jan 21, 2014 at 6:04
It completely depends how u r creating the table... can you provide a jsfiddle — Developer
– Developer, Commented Jan 21, 2014 at 6:09

TGH · Accepted Answer · 2014-01-21 06:15:51Z

2

Try this

$("#someTable tr").each(function(){
   $(this).find("td:first").text("some value");
});

One note though: I typically discourage people from creating dynamic html structures in JavaScript/JQuery. I find it to be much cleaner to do ut using some template based databinding solution like KnockoutJS or similar:http://knockoutjs.com/

edited Jan 21, 2014 at 6:15

answered Jan 21, 2014 at 6:07

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

V.B Over a year ago

Don't we need to take the id of table as well?

TGH Over a year ago

Yes, you can add that in there too.

Lal krishnan S L · Accepted Answer · 2014-01-21 06:07:53Z

Consider you have a div and which has id canvs

Your script page

function create_table_element(rows,cols){

    var rand_id = makeid();
    var node1 = document.createElement("div");      
    node1.setAttribute('id', rand_id);
    document.getElementById("canvas").appendChild(node1);
    row=parseInt(rows);
    col=parseInt(cols);
    var tblid=makeid();
    var inner="<table id='"+tblid+"' class='draggable drsElement new_table_insert foreditor' border='1'></table>";
    $(inner).appendTo(node1);
    var table=document.getElementById(tblid);
    var num=row*col;
    for(var i=0;i<row;i++)
    {
    var row1=table.insertRow(0);
        for(var j=0;j<col;j++)
        {
        var cell1=row1.insertCell(0);
        cell1.innerHTML="new column  &nbsp;"+num;
        num--;
        }
    }

}

And your HTML page

<html>
  <head>
    <script>
      create_table_element(10,5);
    </script>
  </head>
  <body>
    <div id='canvas'>
   </div>
  </body>
</html>

Collectives™ on Stack Overflow

Creating a dynamic table with Jquery

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related