如何高亮实现被选中的行

最新推荐文章于 2023-10-20 14:56:25 发布

JAVAZHICHIZHE

最新推荐文章于 2023-10-20 14:56:25 发布

阅读量1.6k

点赞数

文章标签： javascript html input class table border

本文链接：https://blog.csdn.net/JAVAZHICHIZHE/article/details/6468690

版权

1、如何让选中的一行记录高亮显示？

在TR标签中用onclick事件,在JS中更改该标签的style document.getElementById('xxxxx').bgColor="#FF0000"; onclick事件中

可以用javascript实现
比如
<tr οnclick="this.bgColor='#006699">

再补充一下,因为在选中其他行之后颜色还要变回去,可以这样写:
<tr bgcolor="red" οnclick="this.bgColor='green'" οnfοcusοut="this.bgColor='red'">

2、看似可行，但是试验没有看到效果的.... ....

在HTML中,要高亮选中一行非常简单,在<tr> 标签上加上onmouseover 事件和onmouseout , 然后使用this.style.backgroundColor=xxx 来表示 , 比如如下代码

<table border="1">
<tr οnmοuseοver="this.style.backgroundColor=’red’;" οnmοuseοut="this.style.background=’white’">
<td>hello world hello world</td>

<td>hello world hello world</td>

<td>hello world hello world</td>
<td>hello world hello world</td>
</tr>
</table>

BIRT 报表中当然也是可以嵌入HTML 和javascript 的, 通过在 "Text" 元素中选择 "HTML" 和 Formatting 格式.

birt-exchange 上有一个例子演示了如何在html 中鼠标移动的时候高亮选中一行,里面同时也演示了在对应的图表上怎么样鼠标移动时对应的表格里面的行也被高亮选中.通过在 chart 上的y轴添加一个onmouseover 事件.

另外一个需要注意的就是里面的<tr> 元素的id 是通过 bookmark 属性确定的. 这个例子中,bookmark 的值就是row["Country"] . 其余也不用多说.仔细看例子就知道了. 里面用来一点javascript . 可以学学怎么样取得table 的id 的.

————————————参考代码——————————

<html>
<head>
<style>
.normal{
   color:black;
   background-color:white;
}
.highNight{
   color:white;
   background-color:red;
}
</style>
</head>
<body>
<input type="checkbox" id="cbox1" name="cbox"/>
<span class="normal" οnclick="if(document.cur)document.cur.className='normal'; cbox1.checked=!cbox1.checked;if(cbox1.checked)this.className='highNight';else this.className='normal';document.cur=this;">点点看</span><bR>
<input type="checkbox" id="cbox2" name="cbox"/>
<span class="normal" οnclick="if(document.cur)document.cur.className='normal'; cbox2.checked=!cbox2.checked;if(cbox2.checked)this.className='highNight';else this.className='normal';document.cur=this;">点点看</span><br>
<input type="checkbox" id="cbox3" name="cbox"/>
<span class="normal" οnclick="if(document.cur)document.cur.className='normal'; cbox3.checked=!cbox3.checked;if(cbox3.checked)this.className='highNight';else this.className='normal';document.cur=this;">点点看</span><br>
</body>
</html>