`
txf2004
  • 浏览: 7065143 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

表格复选和复选变色效果

阅读更多
http://www.corange.cn//uploadfiles/d5cc383861502d23b9998f49_50646.png
http://www.corange.cn//uploadfiles/dbe0bb18d34b100034fa4148_77049.png


<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="#A8A8A8";}
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"><a href="http://www.it365cn.com/bbs" target="_blank">http://www.it365cn.com/bbs</a></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"><a href="http://www.blueidea.com/bbs" target="_blank">http://www.blueidea.com/bbs</a></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"><a href="http://www.fwcn.com/bbs" target="_blank">http://www.fwcn.com/bbs</a></td>
</tr>
<tr class="row">
<td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> <strong>全选/取消</strong></td>
</tr>
</form>
</table>

分享到:
评论

相关推荐

    表格复选和复选变色效果.rar

    本资源“表格复选和复选变色效果.rar”似乎提供了一个实现此类功能的示例,主要用于JavaScript(JS)特效,特别是与表格和图层相关的操作。下面我们将详细探讨这些知识点。 1. **复选框(Checkbox)**:复选框是...

    表格复选和复选变色效果特效代码

    "表格复选和复选变色效果特效代码"是一个关于如何在表格中实现复选框功能,并结合动态颜色变化效果的编程实践。这个主题通常涉及到前端开发,特别是JavaScript、HTML和CSS技术的应用。 首先,我们需要理解表格...

    js 实现 选中表格行前的复选框则行变色

    js 实现 选中表格行前的复选框则行变色! 值得下载看看!资源免费,大家分享!!

    表单数据验证_表格隔行变色效果_复选框的操作_好友列表_省市菜单联动效果

    在IT领域,网页开发是不可或缺的一部分,而表单数据验证、表格隔行变色效果、复选框操作、好友列表以及省市菜单联动效果都是网页交互中的常见功能。这些功能不仅提升了用户体验,也是开发者必备的技能。下面将详细...

    js实现表格变色(鼠标移动 选中变色)

    本教程将详细讲解如何通过JavaScript实现表格行在鼠标移动、选中复选框时的变色效果。 首先,我们需要一个包含表格数据的HTML文件,例如`test2l.html`。在这个文件中,我们将创建一个带有复选框的表格。基本的HTML...

    表格隔行换色 鼠标移过变色

    文件内容可能包括HTML结构(包含表格和复选框)、CSS样式定义以及JavaScript代码,用于控制表格的显示效果和多选功能。通过打开和查看这个文件,你可以直观地学习到如何在实际项目中应用这些技术。 总的来说,"表格...

    DBGridEh(导出 排序 变色 复选)

    这个压缩包文件"DBGridEh1(导出 排序 变色 复选)"包含了一系列示例程序,旨在演示如何利用DBGridEh实现数据导出、排序、颜色变化以及复选功能。 1. 数据导出:DBGridEh支持多种格式的数据导出,如CSV、Excel、PDF等...

    简单js实现全选全部选反选效果

    在JavaScript编程中,全选和反选功能是常见的交互元素,尤其在表格或者多选列表中,用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能,以提升用户体验。 首先,我们需要理解...

    JS+CSS的table表格特效

    1. **复选框全选**:这是表格中常用的一个功能,允许用户通过一个主复选框一次性选中或取消选中所有子复选框。这个功能通常通过JavaScript实现,监听主复选框的`change`事件,然后遍历所有子复选框,根据主复选框的...

    隔行变色的表格(Table)

    比较实用的隔行变色的table,带js和复选框,全选反选

    jQuery table选中表格行变色

    例如,通过添加`checkbox`元素并监听`change`事件,可以让用户通过复选框选择多行。此外,可以结合`data-*`属性存储行的额外信息,以便在选中行后进行更复杂的操作,如编辑、删除或导出数据。 以上就是使用jQuery...

    jQuery Table选中表格行变色代码.zip

    如果你希望在多选模式下工作,还可以使用复选框并跟踪所有选中的项。 总之,"jQuery Table选中表格行变色代码"是一个实用的示例,展示了如何利用jQuery改进用户与表格数据的交互。通过结合HTML、CSS和jQuery,...

    js实现选中复选框文字变色的方法

    以上代码中定义了一个表格,其中每一行包含一个复选框和一个文字标签。当复选框被点击时,`chaCloor`函数会被触发。这个函数会检查复选框是否被选中,并相应地改变相邻文字标签的背景色。 需要注意的是,在真实的...

    layui的表格table选中数据后更改本行的颜色

    总的来说,实现layui表格选中行变色的功能,主要涉及JavaScript事件监听、DOM操作以及CSS样式设置。在前后端分离的项目中,前端通过调用后端API获取数据并渲染到表格。理解并熟练运用这些技术,能帮助你更好地利用...

    javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox

    总结来看,通过结合文档中提供的代码和解释,我们可以了解到如何使用jQuery来增加表格的动态交互功能,如悬停变色、点击变色及点击行选中复选框等。这些功能提升了用户界面的友好性,使得表格数据的展示和操作更加...

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    总结来说,本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色,而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本,可以极大地增强网页的功能和用户的交互...

    jquery操作表格隔行,滑动,点击,变色

    4. **多选框选中变色**:在表格中,如果包含复选框(`&lt;input type="checkbox"&gt;`),可以监听`change`事件来判断哪些行被选中,并改变这些行的样式。例如: ```javascript $("table tbody input[type='checkbox']")....

    用JS控制表格的逐行变色的表单

    这段代码假设有一个ID为`selectAll`的全选复选框,以及表格中的所有复选框都在`&lt;tbody&gt;`标签内。当全选复选框状态改变时,会同步所有行内复选框的状态。点击表格的任意一行时,会切换该行的高亮状态。 总的来说,...

    表格特效、js、css、图片

    1. **表格特效**:表格特效主要是通过CSS和JavaScript来实现的,如标题所述,包括表格复选按钮的选中变色特效、表格排序、鼠标经过表格变色以及鼠标经过显示产品图片等。这些特效不仅能让表格看起来更专业,还能增强...

    jQuery Table选中表格行变色代码

    这样,当用户点击全选复选框时,所有表格行都会变色,反之则会取消所有选中。同时,当用户手动选择或取消某行时,全选复选框的状态也会自动更新。 以上就是使用jQuery实现表格行选中变色及全选功能的基本步骤。在...

Global site tag (gtag.js) - Google Analytics