单击 td 内的超链接时更改 td 颜色

Question

我正在使用 Wicket 创建一个 table，它有多个 link 并且每个 link 具有不同的功能。现在，我想在单击 link 时更改 td 的颜色。我尝试了不同的代码，结果要么只是 link 的一部分发生了变化，要么 td 在单击时发生了变化，但 link 没有被单击。

<td width=30 onclick="javascript:this.style.background = '#009999';" style='width: 22.5pt;  background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt' id=redcell>
    <p class=MsoNormal align=center style='text-align: center'>
        <span style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
            <a href="#" wicket:id="agent_one" value="1" >
                <b>
                    <span style='display:block; font-size: 12.0pt; color: white' >1</span>
                </b>
            </a>
            <o:p></o:p>
        </span>
    </p>
</td>

Answer 1

您可以使用父节点属性 "drill-up" DOM 层次结构。在您的情况下，TD 是 link 的曾祖父元素（中间有一个段落和一个跨度），因此您需要添加到 link 的内容如下所示：

onclick="javascript:this.parentNode.parentNode.parentNode.style.backgroundColor = '#009999';"

或者在完整代码的上下文中：

<td width=30 style='width: 22.5pt;  background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt' id=redcell>
<p class=MsoNormal align=center style='text-align: center'>
<span style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<a href="#" onclick="javascript:this.parentNode.parentNode.parentNode.style.backgroundColor = '#009999';" wicket:id="agent_one" value="1" ><b><span                                                                          style='display:block; font-size: 12.0pt; color: white' >1</span> </b></a>
<o:p></o:p> </span>
</p>
</td>

Answer 2

试试这个

<tr>
    <td onclick="this.style.backgroundColor = 'Red';">Sample</td>
    <td onclick="this.style.backgroundColor = 'Blue';">Data</td>
</tr>

JSFiddle Demo

单击 td 内的超链接时更改 td 颜色

Changing td color when clicking hyperlink inside the td

html

javascript

css

wicket