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

Question

我创建了一个表结构，其中每个 td 都有一个文本。 调用 onclick 函数 changeFocus(liVSE) 不会返回 liVSE，但在提醒它时显示为 [object TableCellElement]。如果我需要将其提醒为 (liVSE)，我该怎么办。 或者请建议任何其他更简单的方法来获取 idname

请将我视为新手 HTML CSS Javascript 开发人员。

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

为了避免将来出现麻烦，我建议您将 html 与脚本分开(onclick 属性已成为过去，真的)。您可以从外部 javascript 文件(链接在文档末尾)执行类似以下操作

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);
}

看看http://jsfiddle.net/Tv3Lx/2/我在哪里删除了内联脚本调用(onclick 属性)

此代码有很多问题(您可能不想选择页面上的所有元素，旧 IE 使用“attachEvent”而不是“addEventListener”)但希望您能朝着正确的方向开始。 MDN是一个很好的 JavaScript 资源，有很多例子