beginner: inserting new rows into a table

I'm trying to end a row & add a new row after every 5th table cell through js. What am I doing wrong here?


<script>
function init() {
var table = document.getElementById("myTable");
var td = table.getElementsByTagName("td");

for(x=4; x<td.length; x=x+5) {
$(td[x]).after("</tr><tr>");
}

/*alert($("#holder").html());*/
}
window.onload = init;
</script>



<div id="holder">
<table id="myTable">
<tr>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
<td><div><img src=""><p><span>name</span>description</p></div></td>
</tr>
</table>
</div>

$().after() can only insert a complete DOM element (i.e. a complete row). But it can't just wrap lines which is what you really want to do. Please look at .wrapAll()

Btw. why are you using getElementsByTagName and getElementById if you are already using jQuery?

The task itself cannot easily be done. I found a pluig-in that you could use (http://forloop.co.uk/blog/wrap-child-elements-in-groups-in-jquery)

// Copyright (c) 2011 Russ Cam
// -------------------------------------------------------
// Dual licensed under the MIT and GPL licenses.
// - http://www.opensource.org/licenses/mit-license
// - http://www.opensource.org/licenses/gpl-3.0
(function($){
$.fn.wrapChildren = function(options) {

options = $.extend({
childElem : undefined,
groupSize : 1,
wrapper : '<div>'
}, options || {});

if (options.childElem === undefined) return this;

return this.each(function() {
var elems = $(this).children(),
len = pos = 0;

elems.each(function(i,value) {
len += $(value).is(options.childElem)? 1 : 0;
if (len > 0 && (len % options.groupSize === 0) || (i === elems.length - 1)) {
elems.slice(pos,i + 1).wrapAll(options.wrapper);
len = 0;
pos = i + 1;
}
});
});

}
})(jQuery);


Sample call for you

$('#myTable tbody').wrapChildren({ childElem : 'td' , groupSize: 5, wrapper : '<tr>'})

Why not use the methods built into JavaScript itself for adding a row to a table?

For example:

var tables, lastRow, row, newCell, rowValues;
rowValues = ['first cell', 'cell 2', 'another cell'];
tables = document.getElementsByTagName('table');
lastRow = tables[0].rows.length;
row = tbl.insertRow(lastRow);

for (var i = 0, ii = rowValues.length; i < ii; i++) {
newCell = row.insertCell(i);
newCell.appendChild(document.createTextNode(rowValues[i]));
}

@felgall How would that group some existing td table elements into new rows?

@felgall How would that group some existing td table elements into new rows?

If the values being assigned to those new rows or cells were existing elements in the page then you would need to use deleteCell and deleteRow to remove them from their prior location as these insert commands would be creating new <tr> and <td> elements and not moving the existing ones.