innerHTML and IE workaround

[Sharkadder]

Hi there, I have recently been trying some code out to replace the innerHTML contents from within a table row, i am now to discover that Internet Explorer which a lot of people still use insists of making innerHTML properties read only, although the code works flawlessly in Firefox and Google Chrome. The code i have currently got is shown below: document.getElementsByTagName("tr").innerHTML = document.getElementsByTagName("tr").innerHTML.replace(document.getElementsByTagName("tr").cells[j].childNodes[0].id,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[0].name,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[2].id,calendarid).replace(document.getElementsByTagName("tr").cells[selecttdid].childNodes[0].name,selectname); As you can see from the above code i am trying to tell a tag name TR which has an index of i innerHTML to change to itself but with some things replaced. You don't need to know what i am replacing inside the code as that code is all fine. What i would like to know is, what work around do i have to change the innerHTML using Javascript or JQuery? Some people have said to stick it into a Div tag but the problem is that the table is inside of a form and i am sending the elements from a form to a different page and so i would rather keep it inside the table row. I have also read that innerHTML can be used to modify specific cells from within a table i.e. contents inside a TD tag. Does anybody know how i can modify my code accordingly so that the debugger stops spitting out the "operation" error messages when i put debugging on due to trying to write to innerHTML? I have also tried using outerHTML and didn't seem to work either: document.getElementsByTagName("tr").outerHTML.replace(document.getElementsByTagName("tr").innerHTML,document.getElementsByTagName("tr").innerHTML.replace(document.getElementsByTagName("tr").cells[j].childNodes[0].id,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[0].name,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[2].id,calendarid).replace(document.getElementsByTagName("tr").cells[selecttdid].childNodes[0].name,selectname)); You will notice in the above i am trying to replace the innerHTML of an element(a TR tag at number i) with some things removed and again, because i am trying to modify the innerHTML...it was a no go again. Finally i have tried to modify a value property in internet explorer and this time it spits out a 5007 error saying that it is unable to set the value of the property, anybody know how i can get around this? My code again for this is below to what i currently tried: document.getElementById("unitstartdate"+totaltablerows).value = startdate; The ID's do exist and again this code worked fine in firefox and chrome, just not IE. I think i am more after a work around for both situations rather than you understanding what i am actually trying to replace etc. as the replace part of the code is fine, just will not write to HTML in Internet explorer using innerHTML, outerHTML or change a value of an element as mentioned. Any ideas are great. Mark

[jeffman]

Tables are notoriously picky about innerHTML. I try never to use that property on any table element but a TD element. So that might mean deleting and creating TD elements using the deleteCell and insertCell methods. Or if you really want to do bigger chunks at a time, then some DOM methods might work, such as these and this. Maybe cloneNode could do some of the work? Without seeing more code, I cannot be sure what might be causing the 5007 error. Usually it means the object doesn't exist. Try alerting "unitstartdate"+totaltablerows to see if the + operator is not casting the values the way you expect. It might be trying to do math instead of concatenation.

[Sharkadder]

Hi there and thank you for the reply. I have tried just about everything and silly internet explorer keeps kicking back error messages! Beginning to get frustrating now. Do you know of any function where i can pass it the tag name i am wanting to send HTML to e.g."document.getElementsByTagName("tr")" and to then replace the HTML to update the table row without innerHTML I have tried the following and it just does not work! //inside the head of the document

function replaceHtml(el, html) {	var oldEl = typeof el === "string" ? document.getElementById(el) : el;	/*@cc_on // Pure innerHTML is slightly faster in IE		oldEl.innerHTML = html;		return oldEl;	@*/	var newEl = oldEl.cloneNode(false);	newEl.innerHTML = html;	oldEl.parentNode.replaceChild(newEl, oldEl);	/* Since we just removed the old element from the DOM, return a reference	to the new element, which can be used to restore variable references. */	return newEl;};

//inside the body

newHTML = document.getElementsByTagName("tr")[i].innerHTML.replace(document.getElementsByTagName("tr")[i].cells[j].childNodes[0].id,nameandid).replace(document.getElementsByTagName("tr")[i].cells[j].childNodes[0].name,nameandid).replace(document.getElementsByTagName("tr")[i].cells[j].childNodes[2].id,calendarid).replace(document.getElementsByTagName("tr")[i].cells[selecttdid].childNodes[0].name,selectname);

//work around for innerHTMLdocument.getElementsByTagName("tr") = replaceHtml(document.getElementsByTagName("tr"),newHTML); IE just states an invalid procedure call on the line:

	var oldEl = typeof el === "string" ? document.getElementById(el) : el;

Think you could amend my code to maybe work or perhaps tell me an alternative function. Many thanks, Mark

Edited January 17, 2013 by Sharkadder

[jeffman]

I think you need to explain a little more specifically what you are trying to do. If you are trying to change the id and name attributes of some elements, there are simpler ways to do it. If you are trying to change something else, there are almost certainly simpler ways to do it. That huge replace statement might work in some browsers, but it's certainly not best practice. I don't know one experienced developer who writes code like that. I'm just being honest.

[Sharkadder]

Hi dude, Thank you once again for the reply. Basically i have a loop which loops through all of the table rows from within a table, each iteration of the loop uses the number i which increments each time the loop goes around. This is why i have code such as: document.getElementsByTagName("tr") <---the i here is the TR element number for whichever iteration the loop is on. So if we look at what i am trying to achieve, I am trying to change the id and name of a select element and three input elements within TD tags using Javascript, alternatively i could use jQuery. I cannot use any server side languages as i allow people to add in a new row to the table by clicking on a button and so Javascript or Jquery is needed to re-number all of the ID's. e.g. i have a row which contains 4 cells, 1 is a select drop down box and the other three all contain an input box. Do you think that you could give me an example of how this could be achieved, and code which will work when using internet explorer? All i need to do is get the element from inside the TD tag and replace the ID and Name value from within it. Is there any way i can make use of GetElementbyID or GetelEmentByName and change the ID or name that way without innerHTML? Many thanks and hope you can help me with this problem..i try to stay away from Javascript and i mostly program in PHP but this has to be client side without needing to refresh the page, Mark

Edited January 17, 2013 by Sharkadder

[jeffman]

It seems to me that statements like this would work. (And don't chain them together.)

document.getElementsByTagName("tr")[i].cells[j].childNodes[0].id = nameandid;

Now, since it's always the same table row, you can simplify things by getting a reference to the row just one time, like this:

var myRow = document.getElementsByTagName("tr")[i];myRow.cells[j].childNodes[0].id = nameandid; // the other statements would also begin with myRow

There would be no advantage to that if you only had one assignment to make, but you have four, so there is a slight advantage.

Edited January 17, 2013 by Deirdre's Dad

[Sharkadder]

Thanks dude i have added that code in now. I have got it all working and even the .value is now working which is really good since i modified the code to what you said. If i stumble across any other problems i shall post on here but i think it is sorted now, going to do some testing tomorrow on my script :-). Mark