www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] JavaScript replace html code

  1. #1
    Join Date
    Dec 2004
    Posts
    88

    resolved [RESOLVED] JavaScript replace html code

    Hi.

    I have a few lines of code which I would like to be able to change. I can only do it client side, so I'm thinking a javaScript replace function might do the trick.

    Basically, I have a code like this:
    HTML Code:
    <table border="1" cellpadding="0" class="my_table">
      <tr>
        <td>Text</td>
      </tr>
    </table>
    I would like to change border="1" into border="0" - how do I do that?

    I have played with this code:
    Code:
    <script type="text/javascript">
    function replace_stuff() {
    document.body.innerHTML = document.body.innerHTML.replace(/border="1"/g,'border="0"');
    }
    </script>
    but it doesn't work in IE. (When replacing ordinary words with this script, it works fine in Firefox and IE...is it an escaping issue or should it be done in another way?)

    Can anybody help me out?

    Thanks.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    document.getElementById("give_the_table_an_id").border = "1";
    innerHTML and tables don't go well together in IE as far as I remember.
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Dec 2004
    Posts
    88
    Hi.

    That seems to do what I'm looking for. It works in both Firefox and Internet Explorer. Only thing is - I only have access to a class on that table, not an id. Can the script be changed to work with a class instead of an id?

    Regards.

  4. #4
    Join Date
    Aug 2007
    Posts
    151
    Try this function
    Code:
    /*
     * $TagClass
     * Find and return elements which belong to parent element and have className, tag match search conditions
     * $TagClass("className",parent,"input")
     */
    $TagClass = function(className, parent, tag)
    {
    	tag = tag||"*";
    	parent = parent||document.body;
    	var children = parent.getElementsByTagName(tag);
    	var elements = [], child, pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
    	for (var i = 0, length = children.length; i < length; i++)
    	{
    		child = children[i];
    		var elementClassName = child.className;
    		if (elementClassName.length == 0) continue;
    		if (elementClassName == className || elementClassName.match(pattern)) elements.push(child);
      	}
      	return elements;
    }
    The classic script: alert("Hello world!")

  5. #5
    Join Date
    Dec 2004
    Posts
    88
    Hi and thank you for your help. Much appreciated.

    I'm not an expert, so could you also tell me how to use it, please?

    Thanks.

  6. #6
    Join Date
    Aug 2007
    Posts
    3,767
    I'd use Ultimate getElementsByClassName despite the name, if you intend on doing this much. If the first table with that class name, use
    Code:
    getElementsByClassName("whateverIsTheClass","table")[0].border = 1;
    If the first element on the page with that class name, use
    Code:
    getElementsByClassName("whateverIsTheClass")[0].border = 1;
    The number in square brackets can be changed to refer to the second etc.
    Great wit and madness are near allied, and fine a line their bounds divide.

  7. #7
    Join Date
    Dec 2004
    Posts
    88
    @Declan1991 - thanks, this looks like a brilliant solution. I have inserted the script in the <head> of my page, but where in the script do I put his line?

    Code:
    getElementsByClassName("login-headline","table")[0].border = 0;
    So basically, I don't know how to run the script... Can you help me out?

  8. #8
    Join Date
    Aug 2007
    Posts
    3,767
    Copy and paste his function into where ever you have your JavaScript. Maybe have it as the first thing in the file. Then your function. Something like
    Code:
    <script type="text/javascript">
    /* His code
    ...
    ...
    */
    function replace_stuff () {
    // Your code
    }
    </script>
    Great wit and madness are near allied, and fine a line their bounds divide.

  9. #9
    Join Date
    Dec 2004
    Posts
    88
    Thanks a million! It works perfectly. You have been a great help.

    Thanks again.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

Posting Permissions

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



Recent Articles