setting outerHTML - can this be done?

[harry]

Using IE 5.5 (sp2) - no other

I have a table that need's to be sorted by single column using javascript.

I have the code to do this but because of the attributes associated with the
<tr> element, when the sorted values are copied back in to the table I want
to replace the entire row not just the inner values!

Any ideas why this doesn't work?

var x = getElementByID('myTable'); //
def get's object successfully
alert(x.rows(0).outerHTML);
// before, shows current content
x.rows(0).outerHTML = "<tr><td>please work</td></tr>"; // Just to test,
but goes no further, no error just bombs out!
alert(x.rows(0).outerHTML);
// after

thanks

harry

 

[harry]

sorry didn't realise what mess it would look with comments -

var x = getElementByID('myTable');
alert(x.rows(0).outerHTML);
x.rows(0).outerHTML = "<tr><td>please work</td></tr>";
alert(x.rows(0).outerHTML); // never gets here

 

[Matt Kruse]

Any ideas why this doesn't work?

IE doesn't let you set the innerhtml or outerhtml of td's or tr's. You also
can't set the innerhtml of a table. You can only set the outerhtml of the
full table itself.

If you want to manipulate table rows or cells, use DOM methods instead.
Or replace the entire table's outerhtml, which could be very slow.

 

[VK]

The Table Object Model cannot be manipulated in such way.

var myTable = getElementById('myTable');
var myRow = myTable.insertRow();
if (myRow != null) {
var myCell = myRow.insertCell();
myCell.innerHTML = '<b>It works !!!!!!!!</b>';
}
else {
window.alert('You can not change a data-bound table. You have to change the
data source itself');
}


More of useful reading:
http://msdn.microsoft.com/workshop/author/tables/buildtables.asp

 

[RobG]

sorry didn't realise what mess it would look with comments -

var x = getElementByID('myTable');
alert(x.rows(0).outerHTML);
x.rows(0).outerHTML = "<tr><td>please work</td></tr>";
alert(x.rows(0).outerHTML); // never gets here

Try using the DOM, it looks a but unweildy but it works.
You can replace individual TDs if you want, you can also use
cloneNode to make a copy of an element that contains a
complex set of other elements (much simpler than slabs of
createElement or innerHTML statements).

<script type="text/javascript">
function repRow(oldTR) {
var newTR = document.createElement('tr');
var newTD = document.createElement('td');
var newTX = document.createTextNode('Replacement text')
newTD.appendChild(newTX);
newTR.appendChild(newTD);
oldTR.parentNode.replaceChild(newTR,oldTR);
}
</script>

<table id="myTable" border="1">
<tr><td>Row above</td></tr>
<tr id="aRow"><td>Here is the current content</td></tr>
<tr><td>Row below</td></tr>
</table>
<form action="" name="aForm">
<input type="button" value="click" onclick="
repRow(document.getElementById('aRow'));">
</form>

Cheers, Rob.