表格全选，列全选，行全项 变色：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SageZk - SagaTable</title>
<script type="text/javascript">
//<![CDATA[
var m;
function searchNodes(oRoot, sTagName, fCallBack) {
if (!oRoot.hasChildNodes()) return;
var cns = oRoot.childNodes;
for (var i = 0; i < cns.length; ++i) {
if (cns[i].nodeType == 1 &&
cns[i].nodeName == sTagName) fCallBack(cns[i]);
searchNodes(cns[i], sTagName, fCallBack);
}
};
function dealclick() {
this.parentNode.parentNode.style.backgroundColor = this.checked ? "#CCCCCC" : "#FFFFFF";
var r, c;
outer: for (var y = 0; y < m.length; ++y) {
for (var x = 0; x < m[y].length; ++x) {
if (m[y][x] == this) {
r = y;
c = x;
break outer;
}
}
}
if (r == 0 && c == 0) {
for (var y = 0; y < m.length; ++y) {
for (var x = 0; x < m[y].length; ++x) {
m[y][x].checked = this.checked;
m[y][x].parentNode.parentNode.style.backgroundColor = this.checked ? "#CCCCCC" : "#FFFFFF";
}
}
} else if (r == 0) {
for (var y = 1; y < m.length; ++y) {
m[y][c].checked = this.checked;
m[y][c].parentNode.parentNode.style.backgroundColor = this.checked ? "#CCCCCC" : "#FFFFFF";
}
} else if (c == 0) {
for (var x = 1; x < m[0].length; ++x) {
m[r][x].checked = this.checked;
m[r][x].parentNode.parentNode.style.backgroundColor = this.checked ? "#CCCCCC" : "#FFFFFF";
}
} else {
//
}
}
window.onload = function() {
m = new Array();
var frm = document.getElementById("f1");
searchNodes(frm, "TR",
function(tr) {
var cbs = new Array();
var tds = tr.childNodes;
for (var i = 0; i < tds.length; ++i) {
if (tds[i].nodeType != 1) continue;
var txt = document.createTextNode(tds[i].innerHTML);
var chk = document.createElement("input");
chk.setAttribute("type", "checkbox");
chk.onclick = dealclick;
var lbl = document.createElement("label");
lbl.appendChild(txt);
lbl.appendChild(chk);
cbs.push(chk);
tds[i].replaceChild(lbl, tds[i].firstChild);
}
m.push(cbs);
}
);
};
//]]>
</script>
</head>
<body>
<form id="f1">
<table border="1">
<tr>
<th>全选</th>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
</tr>
<tr>
<th>2008年</th>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>3000</td>
<td>3000</td>
<td>3000</td>
</tr>
<tr>
<th>2007年</th>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>3000</td>
<td>3000</td>
<td>3000</td>
</tr>
<tr>
<th>2006年</th>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>3000</td>
<td>3000</td>
<td>3000</td>
</tr>
<tr>
<th>2005年</th>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>3000</td>
<td>3000</td>
<td>3000</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
通过以上代码，我们已经成功地在C#的DataGridView中实现了列头带有复选框的全选/全不选功能。注意，这里的代码示例是基于WinForms的，如果你正在使用WPF或其他框架，实现方式可能会有所不同。但基本逻辑是一致的：...
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
为了保持全选按钮的状态与表格项的选中状态一致，需要在每次改变表格项的选中状态时，更新全选按钮的选中状态。可以使用`querySelector`或`querySelectorAll`获取选中项的数量，并与总行数比较，以此来决定全选按钮...
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
本篇文章将深入探讨如何使用CSS来实现表格（TABLE）的样式美化以及添加全选功能。 一、表格样式的基本设置 1. 表格边框：通过`border`属性可以设置表格的整体边框，如`border: 1px solid #ccc;`。为了使表格中的每...
在网页开发中，表格（Table）是常用的数据...总的来说，实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS（用于样式），这是一项基础但重要的交互设计。理解并掌握这个功能，有助于提升网页的用户体验。
通过以上步骤，我们成功地在`DataGridView`的行标题中添加了复选框，并实现了全选/全不选功能，且不需要额外的按钮触发。这使得用户可以更直观地对数据进行批量操作，提高了应用的易用性。 注意，这个实现方式假设`...
在JavaScript（JS）编程中，实现表格列表的全选与反选功能是一项常见的需求，尤其在数据展示和用户交互中。这个"原生JS表格列表全选反选代码"就是一个解决此类问题的示例。下面将详细介绍这个示例中涉及的关键知识点...
- 同时，监听`MouseClick`事件，当用户点击列头时，根据全选复选框的位置判断是否触发全选/全不选操作。 3. **全选逻辑**： - 当用户点击全选复选框时，需要遍历`DataGridView`的所有行，设置每个行的选中状态。...
本示例主要涉及了六个关键功能：表格的刷新、复选框的全选与全不选、行的添加、拷贝、上下移动以及删除。以下是对这些功能的详细解释： 1. **表格刷新**： 刷新表格通常是为了更新表格中的数据，这可能是因为后台...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
在Flex开发中，Datagrid是一种常用的组件，用于展示表格数据，而checkbox全选功能则是提高用户体验的一个重要特性。本文将详细讲解如何实现Flex Datagrid中checkbox的全选功能。 首先，我们要了解Flex Datagrid的...
在Java Web开发中，创建一个具有全选按钮和删除功能的表格是常见的需求，这能够提升用户界面的交互性和操作效率。本篇文章将详细讲解如何实现这个功能。 首先，我们需要理解表格（Table）在Web应用中的基本结构。...
jQuery表格行全选反选插件
获取选中行数据</button> <button class=layui-btn data-type=getCheckLength>获取选中数目</button> <button class=layui-btn data-type=isAll>验证是否全选</button> <...
这个"jQuery实现的表格行全选反选单选特效源码.zip"文件，显然包含了一套实现表格全选、反选和单选功能的jQuery代码示例。以下是对这个知识点的详细讲解： 首先，表格在Web应用中是常见的数据展示方式，全选、反选...
在实际应用中，我们经常需要在列头添加复选框来实现全选或全不选的功能，以便于用户对大量数据进行操作。本篇将深入探讨如何利用SpreadJS实现这一功能，并结合提供的压缩包文件进行解析。 首先，我们关注的是"demo....
5. **全取消功能**：除了全选，通常还需要提供一个全取消功能，一键清除所有已选择的项。这与全选逻辑类似，只是将`selected`属性设置为`false`。 6. **事件绑定**：为了确保全选和全取消功能正常工作，我们需要...