当点击某一起中某一个单元格的超链接时，使该行改变颜色
日期：2014-05-16 浏览次数：20382 次
当点击某一行中某一个单元格的超链接时，使该行改变颜色？
这个表格是通过一个for循环实现的,第二列中是个链接，
现在想实现的功能是，点击链接的时候，会在另一个表格中显示对应的信息，而在本表格本行变色来标明选定的是这一行。一定注意是点击链接后变色，而不是点击单元格。
我想可以在链接上加一个onclick，提交本行的行号（通过for循环中的i确定行号），然后根据行号在这一行应用一个样式。但具体代码我不会写。
------解决方案--------------------
给本行所有td取个name根据int i 的值
可以加onclick 在a标签中 加入i值为入参
black函数通过获得name == td_i 的标签对这些标签进行变色处理
------解决方案--------------------
将最后生成的HTML代码贴出来
------解决方案--------------------
<html>
<head>
<title></title>
<style type="text/css">
.trbg
{
background-color:Red;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function change(obj) {
$(obj).parent().parent().addClass("trbg").siblings().removeClass("trbg");
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>4</td>
</tr>
</table>
</body>
</html>
这个表格是通过一个for循环实现的,第二列中是个链接，
- HTML code
for(int i=0;i<xt_ep_report_cycList.size();i++){
Xt_Ep_REPORT_CycBean report_cycBean = (Xt_Ep_REPORT_CycBean)xt_ep_report_cycList.get(i);
%>
<tr>
<td class="tc"><input type="checkbox" name="cyccodeSelect" value="<%=report_cycBean.getCycCode() %>" id="checkbox"/></td>
<td class="tc"><a href="javascript:getREPORT_PERIOD('<%=report_cycBean.getCycCode() %>')" style="color:#06F;" onclick="black(<%=i+1%>)"><%=report_cycBean.getCycCode() %></a></td>
<td class="tc"><%=report_cycBean.getCycName() %></td>
</tr>
<% }
现在想实现的功能是，点击链接的时候，会在另一个表格中显示对应的信息，而在本表格本行变色来标明选定的是这一行。一定注意是点击链接后变色，而不是点击单元格。
我想可以在链接上加一个onclick，提交本行的行号（通过for循环中的i确定行号），然后根据行号在这一行应用一个样式。但具体代码我不会写。
------解决方案--------------------
给本行所有td取个name根据int i 的值
可以加onclick 在a标签中 加入i值为入参
black函数通过获得name == td_i 的标签对这些标签进行变色处理
------解决方案--------------------
将最后生成的HTML代码贴出来
------解决方案--------------------
<html>
<head>
<title></title>
<style type="text/css">
.trbg
{
background-color:Red;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function change(obj) {
$(obj).parent().parent().addClass("trbg").siblings().removeClass("trbg");
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td><a href="#" onclick="change(this)">奋斗奋斗</a></td>
<td>4</td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
