SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onclick td remove innerHTML

    Can anyone show me how to write script that will remove a string of text from a td when it is clicked, leaving it a blank cell?

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you attempted to write the code yourself? If you have can you post it?

    "Give a man a fish; you have fed him for today. Teach a man to fish; and you have fed him for a lifetime"

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rayday View Post
    Can anyone show me how to write script that will remove a string of text from a td when it is clicked, leaving it a blank cell?
    Hi Rayday,

    Welcome to Sitepoint Forums!

    I don't know how your HTML is and what is in the TD so far but onclick of any elements will help you to do that like:
    Code html4strict:
    <table>
        <tr>
            <td onclick="this.innerHTML='&nbsp;';">hello world!</td>
        </tr>
    </table>

    Hope this will help to go ahead. Good luck!
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onclick="this.innerHTML='&nbsp;'" is exactly what i needed. I obviously don't know js and was over thinking it. Thank you.

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you may want to try this:

    Code JavaScript:
    var x = document.getElementsByTagName('td');
    for (var i=0;i<x.length;i++) {
    	x[i].onclick = function(){ this.innerHTML = ''; }
    }

    What it does is retrieving all the elements "td" and sets it to a variable, then traverse on each element to add the onclick event which will clear the td element

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Instead of having hundreds or thousands of onclick events for the web page to manage, it can be more efficient to use a single event manager that filters out the unwanted ones before passing it through to your event function.

    Here is a pretty generic example where you pass condition and action functions, so that you can specify which events to take action on.

    Code javascript:
    function processEvent(condition, action) {
        return function (evt) {
            evt = evt || window.event;
            var targ = evt.target || evt.srcElement;
            if (condition(targ)) {
                action(targ);
            }
        }
    }
    document.body.onclick = processEvent(
        function condition (targ) {
            return (targ.nodeType === 1 && targ.nodeName === 'TD');
        },
        function action (targ) {
            targ.innerHTML = '';
        }
    );

    The names condition and action on the functions don't have to be there, but are useful reminder as to their purpose.

    The above script will check all clicks that occur, and if they occur on a TD element it will empty that element for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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