不得不重做片段。我希望它现在可以看到。这是使用新代码，当您选择块时，它们会更改td的背景颜色。现在我只是想改变被点击的颜色。我们再来一次。
.active{background-color:red;}<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<link rel="stylesheet" href="FNBStyle.css" type="text/css"
media="screen" title="Stylesheet" />
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]-->
<title>Help Desk Survey</title>
<style>
<!-- /* Font Definitions */
@font-face {
font-family: "Cambria Math";
panose-1: 2 4 5 3 5 4 6 3 2 4;
}
@font-face {
font-family: Calibri;
panose-1: 2 15 5 2 2 2 4 3 2 4;
}
@font-face {
font-family: Tahoma;
panose-1: 2 11 6 4 3 5 4 4 2 4;
}
/* Style Definitions */
p.MsoNormal,li.MsoNormal,div.MsoNormal {
margin: 0cm;
margin-bottom: .0001pt;
font-size: 12.0pt;
font-family: "Times New Roman", "serif";
}
a:link,span.MsoHyperlink {
mso-style-priority: 99;
text-decoration: none none;
}
td.TheSelection:hover
{
background:#009999;
}
<!-- begin snippet: js hide: false -->
a:visited,span.MsoHyperlinkFollowed {
mso-style-priority: 99;
text-decoration: none none;
}
td.TheSelection:active
{
color:black;
}
td.red-cell {
background: #F00; /* Or some other color */
}
a:hover {
background: #009999;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
p {
mso-style-priority: 99;
mso-margin-top-alt: auto;
margin-right: 0cm;
mso-margin-bottom-alt: auto;
margin-left: 0cm;
font-size: 12.0pt;
font-family: "Times New Roman", "serif";
}
p.MsoAcetate,li.MsoAcetate,div.MsoAcetate {
mso-style-priority: 99;
mso-style-link: "Balloon Text Char";
margin: 0cm;
margin-bottom: .0001pt;
font-size: 8.0pt;
font-family: "Tahoma", "sans-serif";
}
span.BalloonTextChar {
mso-style-name: "Balloon Text Char";
mso-style-priority: 99;
mso-style-link: "Balloon Text";
font-family: "Tahoma", "sans-serif";
}
span.EmailStyle20 {
mso-style-type: personal;
color: black;
}
span.EmailStyle21 {
mso-style-type: personal;
font-family: "Calibri", "sans-serif";
color: #009999;
}
span.EmailStyle22 {
mso-style-type: personal;
font-family: "Calibri", "sans-serif";
color: #009999;
}
span.EmailStyle23 {
mso-style-type: personal;
color: white;
}
span.EmailStyle25 {
mso-style-type: personal-reply;
color: white;
}
.MsoChpDefault {
mso-style-type: export-only;
font-size: 10.0pt;
}
@page WordSection1 {
size: 612.0pt 792.0pt;
margin: 72.0pt 72.0pt 72.0pt 72.0pt;
}
div.WordSection1 {
page: WordSection1;
}
-->
</style>
</head>
<script>
function myHelpFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}
function myAgentFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("agent_cell" + i).style.backgroundColor = "lightgray";
}
}
</script>
<!-- <script type="text/javascript">
$( function() {
$('td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
</script> -->
<body lang=EN-ZA link=blue vlink=purple
style='margin-top: 5.0pt; margin-bottom: 5.0pt'>
<div id="HeaderContainer">
<div id="Logo"></div>
</div>
<br><br><br><br>
<form wicket:id="formSubmit">
<div class=WordSection1>
<p class=MsoNormal>
<span style='color: white'><o:p> </o:p> </span>
</p>
<div>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0
width=700 style='width: 525.0pt'>
<tr style='height: 15.0pt'>
<td colspan=3 style='padding: 0cm 0cm 0cm 0cm; height: 15.0pt'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
</tr>
<tr>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
<td width=660 style='width: 495.0pt; padding: 0cm 0cm 0cm 0cm'>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
The Procurement Help Desk strives to deliver the highest level of service, and we would appreciate it if you could rate your most recent interaction with our agent, by selecting the appropriate score below. Your input is critical in helping us service you better. Although optional, it will assist us in understanding the service provided to you if you can provide us with comments and your details.<o:p></o:p> </span>
</p>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<span class="required">*</span> 1. Please rate the service of the FNB Procurement Help Desk<o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=1 cellpadding=0 width=658
style='width: 493.5pt; background: #F9F9F9; border: solid #009999 1.0pt'>
<tr>
<td style='border: none; padding: 0cm 0cm 0cm 0cm'>
<div align=center>
<table class=MsoNormalTable border=0 cellpadding=0
width="85%" style='width: 85.0%'>
<tr style='height: 114.0pt'>
<td width="40%"
style='width: 40.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Not
Likely</span> </strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>(Not
good enough) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="80%" style='width: 80.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5 cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell1>
<p class=MsoNormal align=center style='text-align: center'>
<span style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<a href="#" onclick="myHelpFunction()" wicket:id="help_one"><b>
<span style='display:block; font-size: 12.0pt; color: white'>1</span> </b>
</a> <o:p></o:p>
</span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell2><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_two"><b><span
style='display:block; font-size: 12.0pt; color: white'>2</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell3><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_three"><b><span
style='display:block; font-size: 12.0pt; color: white'>3</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell4><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_four"><b><span
style='display:block; font-size: 12.0pt; color: white'>4</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell5><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_five"><b><span
style='display:block; font-size: 12.0pt; color: white'>5</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF0004; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell6><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_six"><b><span
style='display:block; font-size: 12.0pt; color: white'>6</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
<td width="14%"
style='width: 14.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Likely</span>
</strong><b><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>
</span> </b><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>(We
can do better) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="50%" style='width: 50.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5
cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #FF7F00; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell7><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_seven"><b><span
style='display:block; font-size: 12.0pt; color: white'>7</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #FF7F00; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell8><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_eight"><b><span
style='display:block; font-size: 12.0pt; color: white'>8</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
<td width="13%"
style='width: 13.0%; padding: .75pt .75pt .75pt .75pt; height: 114.0pt'><p
class=MsoNormal align=center style='text-align: center'>
<strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>Absolutely</span>
</strong><span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><br>(We
did great) <o:p></o:p> </span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0
cellpadding=0 width="50%" style='width: 50.0%'>
<tr>
<td width="50%"
style='width: 50.0%; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
<td
style='border: none; border-left: dotted #333333 1.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td colspan=2
style='border: dotted #333333 1.0pt; border-bottom: none; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222; display: none'><o:p> </o:p>
</span>
</p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=5
cellpadding=0 width="100%" style='width: 100.0%'>
<tr style='height: 30.0pt'>
<td width=30
style='width: 22.5pt; background: #709F32; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell9><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_nine"><b><span
style='display:block; font-size: 12.0pt; color: white'>9</span> </b>
</a> <o:p></o:p> </span>
</p>
</td>
<td width=30
style='width: 22.5pt; background: #709F32; padding: 0cm 0cm 0cm 0cm; height: 30.0pt'
id=help_cell10><p class=MsoNormal align=center
style='text-align: center'>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'><a
href="#" onclick="myHelpFunction()" wicket:id="help_ten"><b><span
style='display:block; font-size: 12.0pt; color: white'>10</span>
</b> </a> <o:p></o:p> </span>
</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align: center'>
<o:p></o:p>
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'><p
class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'> <o:p></o:p>
</span>
</p>
</td>
</tr>
<tr>
<td><p></p>
</td>
</tr>
<tr>
<td></td>
<td>
<p>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<span class="required">*</span> 2. Please select an agent that assisted you and rate their service.<o:p></o:p> </span>
</p></td></tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'></td>
<td><select wicket:id="fromConsultants"></select></td>
</tr>
<tr style='height: 15.0pt'>
<td colspan=3 style='padding: 0cm 0cm 0cm 0cm; height: 15.0pt'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
</tr>
<tr>
<td width=20 style='width: 15.0pt; padding: 0cm 0cm 0cm 0cm'>
<p class=MsoNormal>
<span
style='font-size: 10.0pt; font-family: "Arial", "serif"; color: #222222'>
<o:p></o:p> </span>
</p></td>
<td width=660 style='width: 495.0pt; padding: 0cm 0cm 0cm 0cm'>
</td>
</tr>
</table>
</div>
<p class=MsoNormal>
<o:p> </o:p>
</p>
</div>
<table>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Please Enter your details here (Optional)</td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Employee Number:</td>
<td><input type="text" wicket:id="empNumber" size="42" /></td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Employee Name:</td>
<td><input type="text" wicket:id="empName" size="42" /></td>
</tr>
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Business Unit:</td>
<td><input type="text" wicket:id="BU" size="42" /></td>
</tr>
</table >
<table >
<tr>
<td style='font-size: 10.0pt; font-family: "Arial", "serif";'> Comment:</td>
</tr>
<tr>
<td> <textarea cols=90 rows=4 wicket:id="comment"></textarea></td>
</tr>
</table>
<table>
<tr>
<td><div wicket:id="feedbackPanel"></div></td>
</tr>
<tr>
<td><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
</body>
</html>
答案 0 :(得分：0)
您需要使用Wicket AjaxLink组件。或者根本不使用Wicket组件。
正常（即非Ajax）链接将“刷新”页面，因为它发送执行Link的#onClick（）方法的请求，并刷新整个页面以显示点击的结果。
您可以使用JavaScript来抑制<a>的默认行为，但是您真的需要在页面中使用链接吗？！您可以使用纯JavaScript来更改客户端上的颜色。使用#renderHead(IHeaderResponse)提供绑定事件侦听器的your.js文件并完成工作。
答案 1 :(得分：0)
我能够得到它。
function myHelpFunction()
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 11; i++)
{
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}
这是适用于颜色的最新版本。现在剩下的就是在Wicket中完成所有这些工作。
function myHelpFunction(link)
{
var numbers = [1,2,3,4,5,6,7,8,9,10];
var i;
for(i=1; i< 12; i++)
{
if(link >= 1 && link <=6)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#FF0004";
}
if(link == 7 || link ==8)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#FF7F00";
}
if(link == 9 || link ==10)
{
document.getElementById("help_cell" + link).style.backgroundColor = "#709F32";
}
document.getElementById("help_cell" + i).style.backgroundColor = "lightgray";
}
}