js css html表格选中变色

<style type="text/css">
.css_Grid1
{
padding:3px;
border:1px;
border-width:1px;
border-color:#ffee00;
width:100%;
border-collapse:collapse;
}
.css_Grid
{
color:Black;
background-color:#ffffee;
border-color:#5D7B9D;
border-width:1px;
border-style:solid;
width:450px;
}
.css_GridTR
{
color:White;
background-color:#5D7B9D;
}
td
{
font-size: 9pt;
padding:3px;
}
.css_TR_c1
{
background-color:#ffffee ;
color:#000000;
}
.css_TR_c2
{
background-color:#ffffaa ;
color:#993300;
}
.css_TR_move
{
background-color:#eaa ;
color:#123456;
}
.css_TR_CK
{
background-color:#ee0 ;
color:#333333;
}
</style>

<p><span id="MG"> </p>
<table class="css_Grid">
<tr class="css_GridTR">
<td>新闻标题</td>
<td>添加时间</td>
<td>人气</td>
</tr>
<tr class="css_TR_c1" οnmοusemοve="Move(this)" οndblclick="DbCK(me)" οnclick="Ck(this,'1')" οnmοuseοut="Out(this)">
<td>iPhone 3G拆解图</td>
<td>08-07-27</td>
<td>00,002</td>
</tr>
<tr class="css_TR_c2" οnmοusemοve="Move(this)" οndblclick="DbCK(me)" οnclick="Ck(this,'2')" οnmοuseοut="Out(this)">
<td>奥运核心资源被分食 搜狐央视网谁忽悠谁?</td>
<td>08-07-27</td>
<td>1,234,567</td>
</tr>
<tr class="css_TR_c1" οnmοusemοve="Move(this)" οndblclick="DbCK(me)" οnclick="Ck(this,'3')" οnmοuseοut="Out(this)">
<td>微软推增强浏览器插件IE7Pro 助IE一臂之力</td>
<td>08-07-27</td>
<td>00,123</td>
</tr>
<tr class="css_TR_c2" οnmοusemοve="Move(this)" οndblclick="DbCK(me)" οnclick="Ck(this,'4')" οnmοuseοut="Out(this)">
<td>智联招聘70%股权换1.1亿美元巨额融资</td>
<td>08-07-27</td>
<td>08,888</td>
</tr>
<tr class="css_TR_c1" οnmοusemοve="Move(this)" οndblclick="DbCK(me)" οnclick="Ck(this,'5')" οnmοuseοut="Out(this)">
<td>前Google员工推搜索引擎Cuill 3倍Google网页数</td>
<td>08-07-27</td>
<td>00,654</td>
</tr>
<tr class="css_TR_c2" οnmοusemοve="Move(this)" οndblclick="DbCK(me)" οnclick="Ck(this,'6')" οnmοuseοut="Out(this)">
<td>WCG中国区落幕 一代新人换旧人</td>
<td>08-07-27</td>
<td>00,003</td>
</tr>
</table>
<p></span>

<script type="text/jscript" language="javascript">
var clickClass = "";
var moveClass = "";
var clickTR ;
var moveTR ;
function Move(me)
{
if (clickTR != me)
{
if (moveTR != me)
{
moveClass = me.className;
moveTR = me;
me.className = "css_TR_move";
//alert("a");
}
}
}

function Out(me)
{
if (clickTR != me)
{
moveTR = null;
me.className = moveClass;
}
}
function Ck(me,dataID)
{
if (clickTR != me)
{
if (clickTR)
{
clickTR.className = clickClass;
}
clickTR = me;
clickClass = moveClass;
}
me.className = "css_TR_CK";
}
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过设置 `rowClassName` 属性来实现选中一行变色的效果。具体实现方式如下: 1. 首先,在表格组件中添加 `rowClassName` 属性,该属性接受一个函数作为参数,用于判断行是否被选中。示例如下: ```html <el-table :data="tableData" :row-class-name="tableRowClassName"> ``` 2. 在 Vue 实例中定义 `tableRowClassName` 方法,该方法接收一个参数 `row`,表示当前行的数据。在该方法中,可以判断该行是否被选中,并返回对应的类名。示例如下: ```javascript methods: { tableRowClassName({row, rowIndex}) { if (rowIndex === this.selectedIndex) { return 'selected-row'; // 选中行的类名 } return ''; } } ``` 其中,`this.selectedIndex` 表示当前选中的行的索引。如果当前行的索引与选中行的索引相等,则返回 `'selected-row'` 类名,否则返回空字符串。 3. 在选中行时,设置 `selectedIndex` 的值,触发表格组件重新渲染,实现选中一行变色的效果。示例如下: ```javascript methods: { handleRowClick(row, column, event) { this.selectedIndex = row.index; } } ``` 在上述代码中,`handleRowClick` 方法用于处理行点击事件,当用户点击某一行时,设置 `selectedIndex` 的值为当前行的索引,从而触发表格组件重新渲染。 最后,通过 CSS 样式设置选中行的背景色即可。例如,可以在样式文件中添加如下代码: ```css .selected-row { background-color: #f5f7fa; } ``` 这样,当用户选中一行时,该行的背景颜色会变成灰色,从而实现选中一行变色的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值