`
net_liu
  • 浏览: 232975 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

表格全选,列全选,行全项

    博客分类:
  • JS
 
阅读更多

表格全选,列全选,行全项 变色:

 

<!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# datagirdview列头增加复选框列多选增加全选列

    通过以上代码,我们已经成功地在C#的DataGridView中实现了列头带有复选框的全选/全不选功能。注意,这里的代码示例是基于WinForms的,如果你正在使用WPF或其他框架,实现方式可能会有所不同。但基本逻辑是一致的:...

    jQuery表格行全选反选单选代码

    jQuery表格行全选反选单选代码,例子采用bootstrap格式,可以选择自定义。

    JS简单表格列表全选反选代码.zip

    为了保持全选按钮的状态与表格项的选中状态一致,需要在每次改变表格项的选中状态时,更新全选按钮的选中状态。可以使用`querySelector`或`querySelectorAll`获取选中项的数量,并与总行数比较,以此来决定全选按钮...

    纯Jquery表格全选+反选+增删查找

    纯Jquery表格全选+反选+增删查找,一个简陋版本,仅供参考,细节处理不周到处请评论,后期有空修改

    CSS实现表格样式及全选功能

    本篇文章将深入探讨如何使用CSS来实现表格(TABLE)的样式美化以及添加全选功能。 一、表格样式的基本设置 1. 表格边框:通过`border`属性可以设置表格的整体边框,如`border: 1px solid #ccc;`。为了使表格中的每...

    实现table表格checkbox复选框的全选 反选

    在网页开发中,表格(Table)是常用的数据...总的来说,实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS(用于样式),这是一项基础但重要的交互设计。理解并掌握这个功能,有助于提升网页的用户体验。

    DataGridView行标题加复选框实现全选

    通过以上步骤,我们成功地在`DataGridView`的行标题中添加了复选框,并实现了全选/全不选功能,且不需要额外的按钮触发。这使得用户可以更直观地对数据进行批量操作,提高了应用的易用性。 注意,这个实现方式假设`...

    原生JS表格列表全选反选代码.zip

    在JavaScript(JS)编程中,实现表格列表的全选与反选功能是一项常见的需求,尤其在数据展示和用户交互中。这个"原生JS表格列表全选反选代码"就是一个解决此类问题的示例。下面将详细介绍这个示例中涉及的关键知识点...

    DataGridView列头绘制(全选)

    - 同时,监听`MouseClick`事件,当用户点击列头时,根据全选复选框的位置判断是否触发全选/全不选操作。 3. **全选逻辑**: - 当用户点击全选复选框时,需要遍历`DataGridView`的所有行,设置每个行的选中状态。...

    js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现

    本示例主要涉及了六个关键功能:表格的刷新、复选框的全选与全不选、行的添加、拷贝、上下移动以及删除。以下是对这些功能的详细解释: 1. **表格刷新**: 刷新表格通常是为了更新表格中的数据,这可能是因为后台...

    jquery全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    flex Datagrid checkbox全选

    在Flex开发中,Datagrid是一种常用的组件,用于展示表格数据,而checkbox全选功能则是提高用户体验的一个重要特性。本文将详细讲解如何实现Flex Datagrid中checkbox的全选功能。 首先,我们要了解Flex Datagrid的...

    表格中全选按钮的使用以及删除功能的实现

    在Java Web开发中,创建一个具有全选按钮和删除功能的表格是常见的需求,这能够提升用户界面的交互性和操作效率。本篇文章将详细讲解如何实现这个功能。 首先,我们需要理解表格(Table)在Web应用中的基本结构。...

    table全选反选

    jQuery表格行全选反选插件

    Layui 带多选框表格监听事件以及按钮自动点击写法实例

    获取选中行数据&lt;/button&gt;  &lt;button class=layui-btn data-type=getCheckLength&gt;获取选中数目&lt;/button&gt;  &lt;button class=layui-btn data-type=isAll&gt;验证是否全选&lt;/button&gt;  &lt;...

    jQuery实现的表格行全选反选单选特效源码.zip

    这个"jQuery实现的表格行全选反选单选特效源码.zip"文件,显然包含了一套实现表格全选、反选和单选功能的jQuery代码示例。以下是对这个知识点的详细讲解: 首先,表格在Web应用中是常见的数据展示方式,全选、反选...

    spreadjs_列头添加复选框全选功能-demo.zip

    在实际应用中,我们经常需要在列头添加复选框来实现全选或全不选的功能,以便于用户对大量数据进行操作。本篇将深入探讨如何利用SpreadJS实现这一功能,并结合提供的压缩包文件进行解析。 首先,我们关注的是"demo....

    ext多选下拉列表的全选功能实现

    5. **全取消功能**:除了全选,通常还需要提供一个全取消功能,一键清除所有已选择的项。这与全选逻辑类似,只是将`selected`属性设置为`false`。 6. **事件绑定**:为了确保全选和全取消功能正常工作,我们需要...

Global site tag (gtag.js) - Google Analytics