+ Post New Thread
Results 1 to 6 of 6
Coding Thread, Javascript Replace & OnLoad in Coding and Web Development; Im trying to find a script to replace some hard coded html: HTML Code: <tr valign=top> <td colspan=2 style=height:80mm;> I ...
  1. #1

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    29

    Javascript Replace & OnLoad

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

    HTML Code:
    <tr valign=top><td colspan=2 style=height:80mm;>
    I want to replace height:80mm; with height:50mm; when the page loads? Can anyone offer me some hel?

  2. #2

    Join Date
    Feb 2009
    Location
    Norfolk, England
    Posts
    12
    Thank Post
    0
    Thanked 2 Times in 2 Posts
    Rep Power
    11
    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 <td style=height:80mm /> ? 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

    Code:
    // 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 <tdArray.length;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;");
           }
    }


    }
    Last edited by autismuk; 25th May 2009 at 03:38 PM. Reason: Completed accidentally :)

  3. #3

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    29
    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.

  4. #4

    Join Date
    Feb 2009
    Location
    Norfolk, England
    Posts
    12
    Thank Post
    0
    Thanked 2 Times in 2 Posts
    Rep Power
    11
    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.

  5. #5

    Join Date
    Feb 2009
    Location
    Norfolk, England
    Posts
    12
    Thank Post
    0
    Thanked 2 Times in 2 Posts
    Rep Power
    11
    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.

    Code:
    <head>
    <script type="text/javascript">
    
    //
    //		This function changes the data table according to how you want it :)
    //		This has only been tested on Firefox 3.0.10 but it should work on anything. 
    //		..... theoretically ..... you know what Internet Explorer is like :(
    //		If something this simple doesn't work cross browser God help us all :<
    //
    function changeTableDataStyle() {
    
    	// Store references to all the <td> elements in array tdList
    	var tdList = document.getElementsByTagName("td");
    	
    	// This is required because Firefox (at least) returns it with spaces even if you don't provide any in the HTML. Fun eh :)
    	// This matches height:(any number of spaces or one)80mm;
    	var tdRegExp = new RegExp("height:\\s*80mm;");
    	
    	// Go through all the <td> elements in the array.
    	for (var i = 0;i < tdList.length;i++) {
    	
    		// Does the style match the regular expression ?
    		if (tdList[i].getAttribute("style").match(tdRegExp)) {
    				
    				// If so update the height to whatever you want, e.g. 50mm.			
    				tdList[i].setAttribute("style","height:50mm;");
    		}	
    	}
    }
    
    </script>
    </head>
    
    <!-- this bit calls the function above when the DOM loading is finished -->
    
    <body onload="changeTableDataStyle()" >
    
    <!-- this bit is just a set of tables to play about with. Note that this will change every td in the whole document that has this style -->
    <!-- if you want to change specific ones you will have to hack about, I'm afraid -->
    
    <table border=1 cellspacing=0 cellpadding=0 >
    <tr>
    	<td style=height:15mm;>15mm</td><td style=height:15mm;>15mm</td><td style=height:15mm;>15mm</td>
    </tr>
    <tr>
    	<td style=height:80mm;>80mm</td><td style=height:80mm;>80mm</td><td style=height:80mm;>80mm</td>
    </tr>
    <tr>
    	<td style=height:30mm;>30mm</td><td style=height:30mm;>30mm</td><td style=height:30mm;>30mm</td>
    </tr>
    </table>
    </body>

  6. Thanks to autismuk from:

    danIT (25th May 2009)

  7. #6

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    29
    Working like a treat, the only thing that didnt work on IE was the format of:

    <td style=height:80mm;>

    It must be: <td style=height:<SPACE> 80mm;> for it to work.

SHARE:
+ Post New Thread

Similar Threads

  1. Find File & Replace
    By 1202 in forum Windows 7
    Replies: 0
    Last Post: 3rd May 2009, 08:15 AM
  2. Selective Javascript
    By danIT in forum Coding
    Replies: 2
    Last Post: 13th March 2009, 07:54 AM
  3. CLI find & replace.
    By PiqueABoo in forum Windows
    Replies: 12
    Last Post: 23rd February 2009, 09:43 PM
  4. html/ javascript help
    By strawberry in forum Coding
    Replies: 2
    Last Post: 2nd July 2008, 11:22 AM
  5. Javascript - Change text
    By danIT in forum Scripts
    Replies: 6
    Last Post: 11th February 2008, 03:12 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •