Insertting Row content for IE6

[Giggle Girl]

Google gave me many hits for ""HTMLTableElement insertRow", but no
practical examples.

Can someone give me the code to insert some _CONTENT_ into a specifc
row of a table?

Specifically, how could I insert this simple row into the third spot in
a table (that has a tbody already), WITHOUT using innerHTML?

<tr id="tree_row_3">
<td width="20" height="20">&nbsp;</td>
<td width="20" height="20">&nbsp;</td>
<td width="20" height="20">Cell 3</td>
<td colspan="7">Cell 4, with colspan!</td>
</tr>

Thanks to anyone who can help me with this,
Ann

 

[Gérard Talbot]

Giggle Girl a écrit :

Google gave me many hits for ""HTMLTableElement insertRow", but no
practical examples.

Can someone give me the code to insert some _CONTENT_ into a specifc
row of a table?

Specifically, how could I insert this simple row into the third spot in
a table (that has a tbody already), WITHOUT using innerHTML?

<tr id="tree_row_3">
<td width="20" height="20">&nbsp;</td>
<td width="20" height="20">&nbsp;</td>
<td width="20" height="20">Cell 3</td>
<td colspan="7">Cell 4, with colspan!</td>
</tr>

Thanks to anyone who can help me with this,
Ann

Assuming that your reference to the tbody is objTBody:

var objTRow3 = objTBody.insertRow(3);
/* "The new row is inserted immediately before the current indexth row
in this section. (...) This index starts from 0 and is relative only to
the rows contained inside this section"
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-93995626
*/
objTRow.id = "tree_row_3";
/* http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-63534901 */
for(var CellIterator = 0; CellIterator < 2; CellIterator++)
{
var objCell = objTRow3.insertCell(CellIterator);
/* http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 */
objCell.width = 20;
/* http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-27480795 */
objCell.height = 20;
/* http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-83679212 */
objCell.appendChild(document.createTextNode(" "));
};
var objCell3 = objTRow3.insertCell(2);
objCell3.width = 20;
objCell3.height = 20;
objCell3.appendChild(document.createTextNode("Cell 3"));

var objCell4 = objTRow3.insertCell(3);
objCell4.colSpan = 7;
/* http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84645244 */
objCell4.appendChild(document.createTextNode("Cell 4, with colspan!"));


If the above does not work, load your code in a page and provide the url
in this thread.
I wish you could have simply kept your posts in the same, previous,
initial thread. Creating another thread breaks, fragments the discussion.

Gérard

 

[Joe Attardi]

Can someone give me the code to insert some _CONTENT_ into a specifc
row of a table?

Specifically, how could I insert this simple row into the third spot in
a table (that has a tbody already), WITHOUT using innerHTML?

<tr id="tree_row_3"> ... </tr>

Hi Ann,

If you want to do this in a pure DOM sort of way, without using
innerHTML, here's what to do.

First, use document.createElement("tr") to create your row and
document.createElement("td") to create each of your cells. For each
cell in the row, call appendChild(element) on the table row, passing
each TD in turn.

Now to set the content of the TDs, use
document.createTextNode("content").

So, basically:

row = document.createElement("tr");
row.id = "tree_row_3";

col1 = document.createElement("td");
col1.appendChild(document.createTextNode("&nbsp;");
row.appendChild(col1);

....

col3 = document.createElement("td");
col3.appendChild(document.createTextNode("Cell 3");
row.appendChild(col3);

Then, once you've done all that, just insert it in the appropriate
point in the table.

 

[Gérard Talbot]

If the above does not work, load your code in a page and provide the url
in this thread.

I just checked my code in a real page and it worked without error,
without problems, without an itch in Mozilla Seamonkey 1.5a, Firefox
1.5.0.1, Opera 9.0 beta 2 and MSIE 7 beta 2.

Gérard

 

[Gérard Talbot]

Gérard Talbot wrote :

var objTRow3 = objTBody.insertRow(3);
/* "The new row is inserted immediately before the current indexth row
in this section. (...) This index starts from 0 and is relative only to
the rows contained inside this section"
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-93995626
*/

Oops. If it's the 3rd table row, then it should be

var objTRow3 = objTBody.insertRow(2);

instead. Anyway, even if you make a mistake there, the js console will
help you in reporting some index problem.

Gérard

 

[Gérard Talbot]

Joe Attardi wrote :

Giggle Girl wrote:

col1.appendChild(document.createTextNode("&nbsp;");

That won't work. If you absolutely need to insert a non-breaking space,
then you must escape to unicode, like this:

col1.appendChild(document.createTextNode("\u00a0");

Gérard

 

[BootNic]

Google gave me many hits for ""HTMLTableElement insertRow", but no
practical examples.

Can someone give me the code to insert some _CONTENT_ into a specifc
row of a table?

Specifically, how could I insert this simple row into the third
spot in a table (that has a tbody already), WITHOUT using innerHTML?

<tr id="tree_row_3">
<td width="20" height="20">&nbsp;</td>
<td width="20" height="20">&nbsp;</td>
<td width="20" height="20">Cell 3</td>
<td colspan="7">Cell 4, with colspan!</td>
</tr>

Thanks to anyone who can help me with this,
Ann

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var parent,clone,ckb;
function bink(x){
if(document.cloneNode && document.insertBefore){
parent = x.parentNode;
while(parent.tagName.toLowerCase()!='tr'){parent=parent.parentNode;}
clone=parent.cloneNode(true);
ckb=(x.innerText)?x.innerText.replace(/\s+/g,' ').replace(/^\s+||\s+$/g,''):
x.textContent.replace(/\s+/g,' ').replace(/^\s+||\s+$/g,'');
}
switch (ckb) {
case 'Insert Before':
parent.parentNode.insertBefore(clone,parent);
break;
case 'Insert After':
parent.parentNode.insertBefore(clone,parent.nextSibling);
break;
case 'Remove':
parent.parentNode.removeChild(parent);
break;
default:
alert('oh crap!');
}
}
</script>
<title></title>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
</head>
<body>
<table summary="" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>Table Cell</td>
<td nowrap>
<button type="button" onclick="bink(this);">Insert Before</button>
<button type="button" onclick="bink(this);">Insert After</button>
<button type="button" onclick="bink(this);">Remove</button>
</td>
</tr>
<tr>
<td>Table Cell</td>
<td nowrap>
<button type="button" onclick="bink(this);">Insert Before</button>
<button type="button" onclick="bink(this);">Insert After</button>
<button type="button" onclick="bink(this);">Remove</button>
</td>
</tr>
</table>
</body>
</html>

--
BootNic Tuesday, February 07, 2006 1:42 PM

"Do not trust your memory; it is a net full of holes; the most
beautiful prizes slip through it."
*Georges Duhamel, The Heart's Domain*