Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

insertAdjacentHTML on non-dynamic table rows 2

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
Joined
May 4, 2001
Messages
1,284
Location
FR
Hi guys ;)

I'm encountering the following problem :

I have a server-side generated table ...

Code: 
...

<tr id="row_1">
<td><a href="javascript: row_add('row_1')">add new row under row_1</a></td>
<tr>

<tr id="row_2">
<td><a href="javascript: row_add('row_2')">add new row under row_2</a></td>
<tr>

...

... and I've found a prototype script that makes insertAdjacentHTML crossbrowser ...

Code: 
// PROTOTYPES

if( typeof HTMLElement != "undefined" && !HTMLElement.prototype.insertAdjacentElement ) {

    HTMLElement.prototype.insertAdjacentElement = function( where , parsedNode ) 	{
    
        switch ( where ) {
        
        case 'beforeBegin':
        this.parentNode.insertBefore( parsedNode ,this )
        break;
        
        case 'afterBegin':
        this.insertBefore( parsedNode , this.firstChild );
        break;
        
        case 'beforeEnd':
        this.appendChild( parsedNode );
        break;
        
        case 'afterEnd':
        
        if ( this.nextSibling ) 
        this.parentNode.insertBefore( parsedNode , this.nextSibling );
        else this.parentNode.appendChild( parsedNode );
        break;
        
        }
    		
    }

    HTMLElement.prototype.insertAdjacentHTML = function( where , htmlStr ) {
	
    var r = this.ownerDocument.createRange();
    r.setStartBefore( this );
    var parsedHTML = r.createContextualFragment( htmlStr );
    this.insertAdjacentElement( where , parsedHTML );
		
    }

    HTMLElement.prototype.insertAdjacentText = function ( where , txtStr ) {
    
    var parsedText = document.createTextNode( txtStr );
    this.insertAdjacentElement( where , parsedText );
    
    }
	
}

... but, it seems that this method doesn't allow me to insert a row between two existing ones. I can only add something at the end of the document with document.body.insertAdjacentHTML .... which I don't need.

So, what row_add() should look like in order to make a row appear just below the concerned one?

I've tried ...

Code: 
document.getElementById( 'row_1' ).appendChild('<tr><td>something</td></tr>');

... but it triggers the following error :

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLTableRowElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: javascript: document.getElementById( 'row_1' ).appendChild('<tr><td>something</td></tr>'); :: <TOP_LEVEL> :: line 1" data: no]
Click to expand...

Does it mean that it's totally impossible to append HTML to a non-dynamically produced row?

Many thanks for the help !! :)
 
Sort by date Sort by votes

Looks like all the pros are toasting themselves on the beach ;)

Anyway, I forgot to mention that the newly created rows should have their own id name too .... which makes it more difficult I guess :(
 
Upvote 0 Downvote
If you don't mind, I would show you the method using the table object model proper. I include create cell functionality for material illustration. (The data include some time (sec) info to show ordering.)
[tt]
<html>
<head><title></title>
<script language="javascript">
function row_add(sid) {
var oelem=document.getElementById(sid);
var otbody=oelem.parentNode;
var orow=otbody.insertRow(oelem.sectionRowIndex+1);
var ocell=orow.insertCell(orow.cells.length);
ocell.innerHTML="created at: " + (new Date()).getSeconds();
}
function column_add(sid) {
var oelem=document.getElementById(sid);
var otbody=oelem.parentNode;
var ocell=oelem.insertCell(oelem.cells.length);
ocell.innerHTML="created at: " + (new Date()).getSeconds();
}
</script>
</head>
<body>
<table>
<tr id="row_1">
<td><a href="javascript: row_add('row_1')">add new row under row_1</a></td>
<td><a href="javascript: column_add('row_1')">add new column at the end of row_1</a></td>
<tr>
<tr id="row_2">
<td><a href="javascript: row_add('row_2')">add new row under row_2</a></td>
<td><a href="javascript: column_add('row_2')">add new column at the end of row_2</a></td>
<tr>
</table>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
895
coldbohemia
coldbohemia
rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
904
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top