jQuery Appending rows / columns

[wblakenc]

Ok here is what I am trying to. I have a form where a user will enter in the number of input fields they need (lets call them offices) and when they click the submit button a jQuery function appends the rows to a plain html table. This works fine, except I do not want the rows to be only vertical or horizontal. I want it to put three input fields on one row before going to the next. Here is the code I have:

//This function is for adding rows to the offices table
function addOfficeRows() {
	var i = 0;
	var counter = document.getElementById("oNum").value;
	var tracking = document.getElementById("officeTracking").value;
	var tracking = parseInt(tracking);
	// second counter which helps determine if a new row should start or not //
	var second = 1;
		for(i=1;i<=counter;i++) {
			if (second == 1) {
				$("#p").append("<tr>");
				$("#p").append("<td>" + tracking + ")" + "&nbsp;&nbsp;&nbsp;<input type='text' size='50' name='Office" + tracking +"' /></td>");
				second = second + 1;
			} else if (second == 2) {
				$("#p").append("<td>" + tracking + ")" + "&nbsp;&nbsp;&nbsp;<input type='text' size='50' name='Office" + tracking +"' /></td>");
				second = second + 1;
			} else if (second == 3) {
				$("#p").append("<td>" + tracking + ")" + "&nbsp;&nbsp;&nbsp;<input type='text' size='50' name='Office" + tracking +"' /></td>");
				$("#p").append("</tr>")
				second = 1;
			}
			tracking += 1;		
		}		
	document.getElementById("officeTracking").value = tracking;
	document.getElementById("officeAddRows").value = "Add More Fields";		
	
}

What happens is the <tr></tr> are getting appended to a "tbody" tag and rest is put outside of that tag, meaning the table is formed vertically. Any idea? Am I using append incorrectly? I am by no means an expert in jQuery so I am open to suggestions.

Thanks!

[pritaeas]

$("#p").append("<tr>"); This will attach the tr tag to the paragraph with id p. Your next line is $("#p").append(...); which does the same. It should read: $("#p tr").append(...);

[wblakenc]

That works, well sorta...

It seems it does exactly what it should and ends the each row with a </tr>, except when it starts a new row it appends that data to all previous rows.

So lets say I type in 10 offices

So I get the first row with offices 1 - 10
second 4-10
third 7-10
fourth 10

I put some window.alert breaks in there to better see what it is doing and it is working except now it is appending to all the previous rows, which I guess makes sense because i am telling it to append to a tr inside table p.

Is there anyway make sure it is appending to the correct row by putting some sort of variable in the statement (I have tried the following and it does not work):

$("#p").append("<tr id=row" + tracking + ">");
$("#p #row" + tracking).append("<td>" + tracking + ")" + "&nbsp;&nbsp;&nbsp;<input type='text' size='50' name='Office" + tracking +"' /></td>");

Any idea?

[pritaeas]

You can use the eq selector to match child N.

$("#p tr:eq(" + N + ")")

This would match table row N. This is zero based. You can also use this with the table cell

$("#p tr:eq(" + N + ") td:eq(2)")

This would match the 3rd cell in table row N.