在JavaScript中获取表tr td中传递的参数

Question

I have created a table structure in which each td has a text. calling an onclick function changeFocus(liVSE) doesnt return me liVSE, while alerting it, displays as [object TableCellElement].. What should I do if I need to alert it as (liVSE). Or please suggest any other easier method to get the idname

Please see me as newbie HTML CSS Javascript developer.

function changeFocus(idname){
    alert(idname);
    clearActive();
    //"info-"+idname.style.display = "block";
    idname.className = "tab-active";
    return true;
}

<table>
    <tbody>
        <tr>
            <td id="liVSE" class="tab-active"  ><span class="tabcorner"><span></span></span><a href="#info-liVSE" onclick="changeFocus(liVSE)">li VSE</a></td>
            <td id="liGoals" class="tab"><span class="tabcorner"><span></span></span><a href="#info-liGoals" onclick="changeFocus(liGoals)">li Goals</a></td>
            <td id="CisoInitiatives" class="tab"><span class="tabcorner"><span></span></span><a href="#info-CisoInitiatives" onclick="changeFocus(CisoInitiatives)">li Iniatives</a></td>
            <td id="EntBusCounsilVSE" class="tab"><span class="tabcorner"><span></span></span><a href="#info-EntBusCounsilVSE" onclick="changeFocus(EntBusCounsilVSE)">Ent. Bus. Council VSE</a></td>
            <td id="DSSGVSE" class="tab"><span class="tabcorner"><span></span></span><a href="#info-DSSGVSE"onclick="changeFocus(DSSGVSE)"> VSE</a></td>
            <td id="SSPGVSE" class="tab"><span class="tabcorner"><span></span></span><a href="#info-SSPGVSE" onclick="changeFocus(SSPGVSE)"> VSE</a></td>
            <td id="SSPGGoals" class="tab"><span class="tabcorner"><span></span></span><a href="#info-SSPGGoals" onclick="changeFocus(SSPGGoals)"> Goals</a></td>
            <td id="CPDMEffectivity" class="tab"><span class="tabcorner"><span></span></span><a href="#info-Effectivity" onclick="changeFocus(Effectivity)"> Effectivity</a></td>
        </tr>
    </tbody>
</table>

Answer 1

To avoid headaches in the future, i suggest you separate your html from your script (the onclick attribute is a thing of the past, really). You could do something like the following from an external javascript file (linked at the end of the document)

function clickHandler(e) {
    // e = event object
    // this = <a>

    e.preventDefault(); // prevent following the link (optional)

    alert(this.parentNode.id); // alert the id of the parent node

    // check your js console for what other properties you get available from the <a>
    console.dir(this);

    // uncomment to alert the value of the href attribute, for instance
    //alert(this.attributes.href.value);

}

var links = document.getElementsByTagName("a");
var i = links.length;

// loop through the links
while (i--) {
    // attach the click handler to each <a>
    links[i].addEventListener("click", clickHandler);
}

Have a look at http://jsfiddle.net/Tv3Lx/2/ where i removed the inline script calls ( onclick attribute)

There are plenty of things wrong with this code (you likely don't want to select all the elements on the page, old IE uses "attachEvent" instead of "addEventListener") but hopefully get you started in the right direction. MDN is a great resource on JavaScript, with plenty examples

Answer 2

try changing onclick="changeFocus(liVSE)"

to

onclick="changeFocus('liVSE')"

Note: the Quotes ' around liVSE

Answer 3

change onclick event for all the element to

changeFocus(this.parentNode.id);

Should work for you