Javascript Replace & OnLoad

[danIT]

Im trying to find a script to replace some hard coded html:

 

 

I want to replace height:80mm; with height:50mm; when the page loads? Can anyone offer me some hel?

[autismuk]

I presume from this that you can't modify the HTML directly - it's held on another server or something like that ? You can't insert an ID or a class either ?

 

It sounds like a job for JavaScript, attached to the OnLoad event as you suggest. But beyond that it's difficult to say, exactly ? Do you want to change *every* instance of this in the DOM, e.g. every instance of

? Is it just one ? Is it always in the same place ?

 

As a hack, if it is always in the same place, you could walk the DOM from the DocumentRoot to the place where you wanted to go and change the HTML directly.

 

Something like this might work - *unfortunately* I'm not in a position to be able to test it right now so this is untested code. I will try and run it later

 

// Get all the td tags into an array
var tdArray = document.getElementsByTagName("td");
var n;
// Scan through all the td tags
for (n = 0;n     // Get the individual tag
   var tdElement = tdArray[n];
   // If it's style is set to "height:80mm;"
   if (tdElement.getAttribute("style") == "height:80mm;" {
      // Set its style to "height:50mm;"
      tdElement.setAttribute("style","height:50mm;");
      }
}

 

 

 

}

Edited May 25, 2009 by autismuk
Completed accidentally :)

[danIT]

That seems perfect, your correct I can edit the HTML or insert a class to do what I want so I need the help of javascript. Your code does look perfect!

 

Unfortunately I'm not that strong on JavaScript so I'm unsure how to:

 

1. Use the code in the example above

 

2. Create an Onload event to use the script above.

 

If anyone could help i'd appreciate it.

[autismuk]

DanIT, I am going to the hospital tomorrow, I will try and check that it actually works and post how to 'fix it in' Wednesday sometime - if you aren't too desperate.

[autismuk]

Okay - now this one works - on Firefox 3.1. Everything is chucked together here in one file with some silly tables to play with, but you can put different bits in different files if you like. It is difficult to say if it will work on IE, Safari, Opera as I work on Linux.

 

There may be gotchas - for example even if you set the attribute to height:50mm; Firefox 3.1 (helpfully) inserts a space so the attribute returns height: 50mm; - this is the reason for using the regexp which allows any number of spaces in there.

 

Your best bet is to get this working in Firefox (should be trivial), then see if it works in other target browsers ; if it does port it into your HTML code.

 

<br />
<br />
//<br />
//		This function changes the data table according to how you want it <img src='https://www.edugeek.net/uploads/emoticons/smile.png.e38e01f2a4850c4158c039aea82ac2a8.png' alt=':)'><br />
//		This has only been tested on Firefox 3.0.10 but it should work on anything. <br />
//		..... theoretically ..... you know what Internet Explorer is like <img src='https://www.edugeek.net/uploads/emoticons/frown.png.cbbd7587b7aef409d872880bc9183d5d.png' alt=':('><br />
//		If something this simple doesn't work cross browser God help us all :<<br />
//<br />
function changeTableDataStyle() {<br />
<br />
	// Store references to all the <td> elements in array tdList<br />
	var tdList = document.getElementsByTagName("td");<br />
	<br />
	// This is required because Firefox (at least) returns it with spaces even if you don't provide any in the HTML. Fun eh <img src='https://www.edugeek.net/uploads/emoticons/smile.png.e38e01f2a4850c4158c039aea82ac2a8.png' alt=':)'><br />
	// This matches height:(any number of spaces or one)80mm;<br />
	var tdRegExp = new RegExp("height:\\s*80mm;");<br />
	<br />
	// Go through all the <td> elements in the array.<br />
	for (var i = 0;i < tdList.length;i++) {<br />
	<br />
		// Does the style match the regular expression ?<br />
		if (tdList[i].getAttribute("style").match(tdRegExp)) {<br />
				<br />
				// If so update the height to whatever you want, e.g. 50mm.			<br />
				tdList[i].setAttribute("style","height:50mm;");<br />
		}	<br />
	}<br />
}<br />
<br />










</pre><table border="1" cellspacing="0" cellpadding="0">

15mm15mm15mm


80mm80mm80mm


30mm30mm30mm

</table><b

[danIT]

Working like a treat, the only thing that didnt work on IE was the format of:

 

 

It must be:

80mm;> for it to work.