469,304 Members | 1,803 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,304 developers. It's quick & easy.

Insertting Row content for IE6

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

Feb 7 '06 #1
6 2998
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-HTM...ml#ID-93995626
*/
objTRow.id = "tree_row_3";
/* http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-63534901 */
for(var CellIterator = 0; CellIterator < 2; CellIterator++)
{
var objCell = objTRow3.insertCell(CellIterator);
/* http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-68927016 */
objCell.width = 20;
/* http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-27480795 */
objCell.height = 20;
/* http://www.w3.org/TR/DOM-Level-2-HTM...ml#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-HTM...ml#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
--
remove blah to email me
Feb 7 '06 #2
Giggle Girl wrote:
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.

--
Joe Attardi

Feb 7 '06 #3
Gérard Talbot wrote:
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
--
remove blah to email me
Feb 7 '06 #4
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-HTM...ml#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
--
remove blah to email me
Feb 7 '06 #5
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
--
remove blah to email me
Feb 7 '06 #6
> "Giggle Girl" <mi*******@gmail.com> wrote:
news:11*********************@g14g2000cwa.googlegro ups.com....

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=p arent.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.nextSi bling);
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*

Feb 7 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by jonathan.beckett | last post: by
1 post views Thread by Richard | last post: by
10 posts views Thread by clintonG | last post: by
1 post views Thread by athirumurthi | last post: by
9 posts views Thread by pbd22 | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.