<style type="text/css">
<!--
.row {BACKGROUND-COLOR: expression(rowIndex%2==1?'':'#F5F5F5')}
Body {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;}
Td {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;}
.tb {border-collapse: collapse}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
//复选
function selectAll(chk)
{
var chk = document.form1.chkAll.checked;
for (i=0;i<document.all.length;i++) {
if (document.all[i].name=="id[]") {
document.all[i].checked=chk;
chkRow(document.all[i]);
}}}
//复选后单元格变色
function chkRow(obj){
var r = obj.parentElement.parentElement;
if(obj.checked){ r.style.backgroundColor="#E6E9F2";}
else {if(r.rowIndex%2==1)r.style.backgroundColor="";else r.style.backgroundColor="#F5F5F5";}
}
</script>
<table width="50%" border="1" cellpadding="3" cellspacing="0" bordercolor="#333333" class="tb">
<form name="form1" method="post" action="">
<tr class="row">
<td width="5%"> </td>
<td width="33%" align="center"><strong>网站名称</strong></td>
<td width="62%" align="center"><strong>网 址</strong></td>
</tr>
<tr class="row">
<td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td>
<td align="center">凤凰网</td>
<td align="center">www.ifeng.com</td>
</tr>
<tr class="row">
<td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td>
<td align="center">腾讯网</td>
<td align="center">www.qq.com</td>
</tr>
<tr class="row">
<td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td>
<td align="center">环球网</td>
<td align="centerwww.huanqiu.comdesign</td>
</tr>
<tr class="row">
<td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> <strong>全选/取消</strong></td>
</tr>
</form>
</table>
分享到:
相关推荐
js 实现 选中表格行前的复选框则行变色! 值得下载看看!资源免费,大家分享!!
在IT行业中,尤其是在前端开发领域,表格操作是常见的任务之一,尤其涉及到用户交互时,复选框和变色效果能够极大地提升用户体验。本资源“表格复选和复选变色效果.rar”似乎提供了一个实现此类功能的示例,主要用于...
接下来,我们编写JavaScript代码(在`script.js`文件中),以处理鼠标移动和复选框选中的事件: ```javascript document.addEventListener('DOMContentLoaded', function() { var table = document.getElementById...
在实际应用中,我们经常需要根据用户的选择状态来改变表格的视觉效果,比如选中某行后改变其颜色,以突出显示。下面将详细介绍如何在layui的表格中实现这一功能,并涉及到相关的JavaScript和CSS知识。 首先,layui...
例如,通过添加`checkbox`元素并监听`change`事件,可以让用户通过复选框选择多行。此外,可以结合`data-*`属性存储行的额外信息,以便在选中行后进行更复杂的操作,如编辑、删除或导出数据。 以上就是使用jQuery...
在本篇文章中,我们将会详细探讨如何使用JavaScript来实现一个功能:当复选框被选中时,其相邻的文字背景色会随之改变。这个方法主要涉及对JavaScript中鼠标事件的处理,以及对DOM(文档对象模型)元素进行操作的...
如果你希望在多选模式下工作,还可以使用复选框并跟踪所有选中的项。 总之,"jQuery Table选中表格行变色代码"是一个实用的示例,展示了如何利用jQuery改进用户与表格数据的交互。通过结合HTML、CSS和jQuery,...
在表格的每一行中加入复选框,然后编写JS代码来处理选中状态。例如,可以创建一个数组来存储选中的行,当用户点击复选框时,更新数组,并同步更新表格的样式以显示选中状态。 ```javascript function ...
3. **选择框**:对于复选框或单选按钮(选择框),我们可以创建一个包含这些控件的小型用户界面,并将它们与表格的单元格关联。当用户更改这些控件的状态时,可以通过状态变量来记录和显示选择。 在实现这些功能时...
"表格复选和复选变色效果特效代码"是一个关于如何在表格中实现复选框功能,并结合动态颜色变化效果的编程实践。这个主题通常涉及到前端开发,特别是JavaScript、HTML和CSS技术的应用。 首先,我们需要理解表格...
1. **复选框全选**:这是表格中常用的一个功能,允许用户通过一个主复选框一次性选中或取消选中所有子复选框。这个功能通常通过JavaScript实现,监听主复选框的`change`事件,然后遍历所有子复选框,根据主复选框的...
文章讲述的是如何使用jQuery来实现当用户点击表格中的复选框时,可以改变该行的背景色,从而实现选中行变色的效果。下面将详细介绍实现这一效果所涉及的知识点。 1. jQuery基础 jQuery是一个快速、简洁的JavaScript...
在上述代码中,`getElementById`方法用于获取全选按钮,`getElementsByName`则用于获取所有具有指定name属性的复选框。点击全选按钮后,循环遍历这些复选框并更新它们的状态。 接下来,我们来实现反选功能。反选即...
同时,当用户手动选择或取消某行时,全选复选框的状态也会自动更新。 以上就是使用jQuery实现表格行选中变色及全选功能的基本步骤。在实际项目中,你可能需要根据具体需求进行调整,比如添加多选功能、实现分页表格...
4. **多选框选中变色**:在表格中,如果包含复选框(`<input type="checkbox">`),可以监听`change`事件来判断哪些行被选中,并改变这些行的样式。例如: ```javascript $("table tbody input[type='checkbox']")....
而在click事件中,除了改变样式类外,还根据行是否被选中来更新复选框的选中状态。 文档中还提到了一些可选参数,如Kin_Table_Header_Offset和Kin_Table_Footer_Offset,这些参数允许我们从表格的顶部和底部开始...
对于本例中的隔行变色效果,jQuery通过选择器和类操作使得表格中的奇数行和偶数行分别具有不同的背景颜色。具体实现时,代码首先为文档加载完成后设置了一个ready函数,然后使用了`:even`和`:odd`选择器来分别选中...
3. **全选/取消功能**:在表头添加一个全选复选框,选中后所有行的复选框都会被选中,反之则全部取消。 4. **分页**:虽然示例代码没有提供后台代码,但可以通过JS实现简单的前端分页,如显示页码和切换页面。 在...
例如,使用jQuery的`:checked`选择器获取所有选中的复选框,然后根据这些选中的项执行相应的逻辑。 5. **实际应用** 这些特性在各种场景中都有应用,比如数据分析、项目管理、电商列表等。例如,在电商网站上,...
jQuery提供了丰富的API,如`.is(':checked')`检查复选框是否被选中,`.change()`监听复选框状态变化,`.attr('checked', true/false)`设置复选框的选中状态。 6. **列表框传值**: 当用户在列表框(`<select>`)中...