ansaurus

Question

what's the easiest method to append a TR to a table by javasript?

Answer 1

+2 A:

Using jQuery:

$('#table_id > tbody').append('<tr><td><span>something here..</span></td></tr>');

I know some may cringe at the mention of jQuery. Including a framework to do just this one thing is probably overkill. but I rarely find that I only need to do "just one thing" with javascript. The hand-coded solution is to create each of the elements required, then add them in the proper sequence (from inner to outer) to the other elements, then finally add the new row to the table.

tvanfosson 2009-05-29 14:25:59

only if he's using jquery

Jonathan Fingland 2009-05-29 14:26:34

+1 In my experience jQuery is never overkill.

Otávio Décio 2009-05-29 14:30:28

How much code does one have to develop before it makes more sense to use a framework? I've written enough hand-crafted javascript, that I've found that starting with a framework is almost always the correct path.

tvanfosson 2009-05-29 14:31:00

@tvanfosson, I do agree that using a library is a good thing, but I don't think that starting to learn JavaScript with one is good. It's a reason people ask questions like: "How do I do a redirect in jQuery?" You don't need a library for that.

Ionuț G. Stan 2009-05-29 14:38:06

@Ionut -- the question wasn't "how do I learn javascript?" but "what's the easiest way to do ..." -- using jQuery is easier than writing the javascript. It may not be the best performing, but I think it is the easiest. I wouldn't have recommended using jQuery to learn to use javascript - those things are orthogonal.

tvanfosson 2009-05-29 14:46:53

It seems like any time someone suggests using jQuery, in particular, but any framework for javascript the downvoters come out of the woods. If I suggested that you shouldn't use ASP.NET (or MVC) to learn how to do web programming on a Windows platform, but should write your own rendering engine when you are learning, I'd be excoriated -- and rightly so. Once frameworks become sufficiently mature, it makes more sense to use the framework from the beginning for common tasks than to reinvent. We're at that point with js. Doesn't have to be jQuery, but I think you should start with a framework.

tvanfosson 2009-05-29 14:53:31

If the user was interested in JQUERY Solution for this problem, he might have posted this question in the JQEURY TAG section. Furthermore, otherwise, what is the point of having different tag? So if you dont know JAVASCRIPT solution, then dont bombard with solutions from LIBRARY.

Shiva 2009-05-29 17:17:09

Answer 2

+8 A:

The first uses DOM methods, and the second uses the non-standard but widely supprted innerHTML

var tr = document.createElement("tr");
var td = document.createElement("td");
var span = document.createElement("span");
var text = document.createTextNode("something here..");
span.appendChild(text);
td.appendChild(span);
tr.appendChild(td);

tbody.appendChild(tr);

OR

tbody.innerHTML +=  "<tr><td><span>something here..</span></td></tr>"

Jonathan Fingland 2009-05-29 14:26:09

Answer 3

A:

If you're not opposed to using jQuery, you can use either of the following where "tblId" is the id of your table and "_html" is a string representation of your table row:

  $(_html).insertAfter("#tblId tr:last");

or

$("#tblId tr:last").after(_html);

Lance Harper 2009-05-29 14:26:42

Answer 4

A:

Really simple example:

<html>
<table id = 'test'>
   <tr><td>Thanks tvanfosson!</td></tr>
</table>
</html>

<script type="text/javascript" charset="utf-8">
   var table = document.getElementById('test');
   table.innerHTML += '<tr><td><span>something here..</span></td></tr>';
</script>

MrHus 2009-05-29 14:27:44

This will replace all the existing rows with a single row. Probably not what's desired.

tvanfosson 2009-05-29 14:32:36

Thanks added a plus sign now.

MrHus 2009-05-29 14:40:01

Answer 5

+3 A:

The most straightforward, standards compliant and library-independent method to insert a table row is using the insertRow method of the table object.

var tableRef = document.getElementById(tableID);

// Insert a row in the table at row index 0
var newRow   = tableRef.insertRow(0);

P.S. Works in IE6 too, though it may have some quirks at times.

Ionuț G. Stan 2009-05-29 14:31:38

Answer 6

A:

i use this function to append a bunch of rows into a table. its about 100% faster then jquery for large chunks of data. the only downside is that if your rows have script tags inside of them, the scripts wont be executed on load in IE

function appendRows(node, html){
    var temp = document.createElement("div");
    var tbody = node.parentNode;
    var nextSib = node.nextSibling;

    temp.innerHTML = "<table><tbody>"+html;
    var rows = temp.firstChild.firstChild.childNodes;

    while(rows.length){
     tbody.insertBefore(rows[0], nextSib);
    }
}

where node is the row to append after, and html is the rows to append

mkoryak 2009-05-29 14:37:19

Answer 7

A:

I use this, works softly:

var changeInnerHTMLOfMyCuteTbodyById = function (id_tbody, inner_html)
{ 
     //preparing
     var my_tbody = document.getElementById (id_tbody);
     var my_table = my_tbody.parentNode;

     my_table.removeChild (my_tbody);

     //creating dom tree
     var html = '<table style=\'display:none;\'><tbody id='+ id_tbody+'>' + 
inner_html + '</tbody></table>';

     var tmp_div = document.createElement ('div');

     tmp_div.innerHTML = html;

     document.body.appendChild (tmp_div);

     //moving the tbody
     my_table.appendChild (document.getElementById (id_tbody));
}

You can do this:

changeInnerHTMLOfMyCuteTbodyById('id_tbody', document.getElementById ('id_tbody').innerHTML + '<tr> ... </tr>');

Mahomedalid 2009-07-23 04:19:49

ansaurus

tags:

views:

answers:

what's the easiest method to append a TR to a table by javasript?

related questions