全选并改变TR颜色

http://hi.baidu.com/abc300/blog/item/4be31cfbb6fd3e106d22ebff.html

 

 

 

全选并改变TR颜色
[日期:01-05] 来源: 作者: [字体:大 中 小]

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---全选并改变TR颜色</title>
<script language="JavaScript" type="text/javascript" for="checkbox" event="onclick">
tr_bgcolor(this);
</script>
<script language="JavaScript" type="text/javascript">
<!--
function tr_bgcolor(c){
var tr = c.parentNode.parentNode;
tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';
}
function selall(obj){
for (var i=0; i<obj.form.elements.length; i++)
if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){
obj.form.elements[i].checked = obj.checked;
tr_bgcolor(obj.form.elements[i]);
}
}
//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888">
<tr><td><input name="selectall" type="checkbox" value="全选" onclick="selall(this)" /></td></tr>
<tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr style="background-color:#eee;"><td width="6%"><input type="checkbox" name="checkbox" /></td><td width="94%">***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
</table>
</td></tr>
</table>
</form>
</body>

</html>

 

 

 

 

 

///////////////////////////////////////////////////////////////////////////////////////////////////////

gymboree_course_list.jsp

 

 

<jsp:useBean id="now1" class="java.util.Date"></jsp:useBean>

 

 

<c:set var="now"><fmt:formatDate value="${now1}" pattern="yyyy-MM-dd HH:mm:ss" /></c:set>
          <c:set var="datebasetime"><fmt:formatDate value="${mamaModuleinput.startDate}" pattern="yyyy-MM-dd HH:mm:ss" /></c:set>
          <c:if test="${now > datebasetime}">
          <tr  class="datalistData" onMouseOver="this.className='datalistDataOn'" onMouseOut="this.className='datalistData'" style="background-color:red">
          </c:if>
         
          <c:if test="${now <= datebasetime}">
          <tr  class="datalistData" onMouseOver="this.className='datalistDataOn'" onMouseOut="this.className='datalistData'">
          </c:if>

### 实现全选行时的高亮显示 为了实现在 Element Plus 表格组件中全选行时的高亮显示效果,可以采用如下方式: 通过监听 `selection-change` 事件来获取当前被选中的行,利用样式类动态控制这些行的颜色变化。具体来说,在 `<el-table>` 中加入该事件处理程序绑定到相应的方法上。 #### HTML 部分 ```html <template> <div> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable"> <!-- 列定义 --> <el-table-column type="selection" width="55"></el-table-column> ... </el-table> </div> </template> ``` #### JavaScript 方法部分 ```javascript export default { data() { return { multipleSelection: [] } }, methods: { handleSelectionChange(selection) { this.multipleSelection = selection; // 更新表格每一行的状态以应用新的样式 this.$nextTick(() => { const rows = this.$refs.multipleTable.bodyWrapper.querySelectorAll(&#39;tr&#39;); Array.from(rows).forEach(row => { row.classList.toggle(&#39;highlight&#39;, false); if (this.isSelectedRow(parseInt(row.getAttribute(&#39;data-index&#39;)))) { row.classList.add(&#39;highlight&#39;); } }); }); }, isSelectedRow(index) { let selectedIds = this.multipleSelection.map(item => item.id); // 假设每行有一个唯一id字段 return selectedIds.includes(this.tableData[index].id); } } } ``` #### CSS 样式部分 ```css <style scoped> .highlight { background-color: #f0f9eb !important; /* 设置您想要的背景颜色 */ } /* 如果需要覆盖默认的选择框样式也可以在这里做调整 */ .el-checkbox__input.is-checked+.el-checkbox__label, .el-checkbox__input.is-indeterminate+.el-checkbox__label{ color: inherit!important; } </style> ``` 上述代码实现了当用户勾选某一行或多行之后,会触发 `@selection-change` 事件处理器 `handleSelectionChange()` 函数[^1]。此函数负责更新内部状态变量 `multipleSelection[]` 遍历所有表格行元素,对于那些已经被选中的行则添加自定义样式的 class 属性 (`highlight`) 来改变其外观表现形式[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值