JQuery 表格操作(交替显示、拖动表格行、选择行等)

最新推荐文章于 2022-11-21 11:58:02 发布
最新推荐文章于 2022-11-21 11:58:02 发布
阅读量2k 收藏 1
点赞数
分类专栏： javascript 文章标签： jquery function input button xhtml 开发工具

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格应用</title>
    <script type='text/javascript' src="js/jquery-1.3.2.js"></script>   
     <style type='text/css'>
  thead
  {
      font-size:12pt;
      font-weight:bold;
      color:#444;    
  }
  
  tbody
  {
      font-size:10pt;
      color:#444;     
  }
  
  td,th
  {
       border:solid 1px #E6E6E6;
       padding-left:3px;
  }
  
  th
  {
      background-color:#5B8;
  }
  
  .alternation
  {
      background-color:#D2FFD2;
  }
  
  .alternation3
  {
      background-color:#DDEEDD;
  }
  
  .mouseOver
  {
      background-color:#DFD;
  }
  
  .selected
  {
      background-color:#B3E1A3;
  }
    </style>
   
    <script type='text/javascript'>
     //<![CDATA[
     /*
   ORain: 2009-3-10
   http://blog.csdn.net/orain
  */  
  $(function(){
   //交替显示行
   $('#alternation').click(function(){    
    $('tbody > tr:odd', $('#example')).toggleClass('alternation');
   });
   
   //三色交替显示行
   $('#alternationThree').click(function(){    
    $('tbody > tr:nth-child(3n)', $('#example')).toggleClass('alternation');
    $('tbody > tr:nth-child(3n+2)', $('#example')).toggleClass('alternation3');
   });
   
   //选择行
   $('#selectTr').click(function(){
    //为表格行添加选择事件处理
    $('tbody > tr', $('#example')).click(function(){
     $('.selected').removeClass('selected');     
     $(this).addClass('selected'); //this 表示引发事件的对象，但它不是 jquery 对象
    }).hover(  //注意这里的链式调用
     function(){
      $(this).addClass('mouseOver');
     },
     function(){
      $(this).removeClass('mouseOver');
     }
    );    
   });
   
   //增加排序功能
   $('#sort').click(tableSort);
   
   //获取排好序后的主键值
   $('#getSequence').click(function(){
    var sequence = [];
    $('#content input[name=noticeSelect]').each(function(){
     sequence.push(this.value);
    });
    alert(sequence.join(','));
   });
   
   //获取表格中已选择的复选框的值集合
   $('#getSelected').click(function(){
    var sequence = [];
    $('#content input[name=noticeSelect]:checked').each(function(){
     sequence.push(this.value);
    });
    alert(sequence.join(','));
   });
   
   //按日期降序排列
   $('#dateDesc').click(descByDate);
  });
  
  //表格排序
  function tableSort()
  {
   var tbody = $('#example > tbody');
   var rows = tbody.children();
   var selectedRow;
   //压下鼠标时选取行
   rows.mousedown(function(){
    selectedRow = this;
    tbody.css('cursor', 'move');
    return false; //防止拖动时选取文本内容，必须和 mousemove 一起使用
   });
   rows.mousemove(function(){
    return false; //防止拖动时选取文本内容，必须和 mousedown 一起使用
   });
   //释放鼠标键时进行插入
   rows.mouseup(function(){    
    if(selectedRow)
    {
     if(selectedRow != this)
     {
      $(this).before($(selectedRow)).removeClass('mouseOver'); //插入              
     }
     tbody.css('cursor', 'default');
     selectedRow = null;      
    }        
   });
   //标示当前鼠标所在位置
   rows.hover(
    function(){     
     if(selectedRow && selectedRow != this)
     {
      $(this).addClass('mouseOver'); //区分大小写的，写成 'mouseover' 就不行      
     }     
    },
    function(){
     if(selectedRow && selectedRow != this)
     {
      $(this).removeClass('mouseOver');
     }
    }
   );
   
   //当用户压着鼠标键移出 tbody 时，清除 cursor 的拖动形状，以前当前选取的 selectedRow   
   tbody.mouseover(function(event){
    event.stopPropagation(); //禁止 tbody 的事件传播到外层的 div 中
   }); 
   $('#contain').mouseover(function(event){
    if($(event.relatedTarget).parents('#content')) //event.relatedTarget: 获取该事件发生前鼠标所在位置处的元素
    {
     tbody.css('cursor', 'default');
     selectedRow = null;
    }
   });
  }
  
  //按日期降序排列
  function descByDate()
  {
   var descElements = $('#content > tr').get().sort(function(first, second){    
    var f = $('td:eq(4)', first).html(); //first = $('td:eq(4)', first).html();IE 下会有问题，FF 正常，下同
    var s = $('td:eq(4)', second).html();
    if(f < s)
     return 1;    
    if(f == s)
     return 0;
    return -1;    
   });   
   $(descElements).appendTo('#content');
  }
 //]]>
    </script>
  
</head>
<body>
 <div id='contain' style="padding:5px;">
  <table id='example' style="width:650px; border-collapse:collapse;">
   <thead style="text-align:center;">
    <tr><td colspan='5'>公告列表</td></tr>
    <tr>
     <th style="width:50px;">選擇</th>
     <th style="width:50px;">序號</th>
     <th style="width:300px;">標題</th>
     <th style="width:100px;">關鍵詞</th>
     <th style="width:150px;">發布日期</th>
    </tr>
   </thead>  
   <tbody id='content'>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='1' /></td>
     <td style="text-align:center;">01</td>
     <td>微軟在 VS 2008 中引入了 jquery</td>
     <td>Microsoft</td>
     <td>2009-01-02 10:30</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='2' /></td>
     <td style="text-align:center;">02</td>
     <td>Linux微软Sun将探讨操作系统的未来</td>
     <td>Sun</td>
     <td>2009-01-03 09:30</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='3' /></td>
     <td style="text-align:center;">03</td>
     <td>联想集团董事长柳传志：联想将在一年内成功</td>
     <td>聯想</td>
     <td>2009-01-05 14:30</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='4' /></td>
     <td style="text-align:center;">04</td>
     <td>美议员要求立法限制Google地球 违反将日罚25万</td>
     <td>Google</td>
     <td>2009-01-10 20:45</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='5' /></td>
     <td style="text-align:center;">05</td>
     <td>FireFox实验室提出新标签页理念并发布原始模型</td>
     <td>FireFox</td>
     <td>2009-01-14 17:58</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='6' /></td>
     <td style="text-align:center;">06</td>
     <td>向Ruby之父学程序设计</td>
     <td>Ruby</td>
     <td>2009-01-19 07:22</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='7' /></td>
     <td style="text-align:center;">07</td>
     <td>Apple智能手机市场份额翻番达10.7%</td>
     <td>Apple</td>
     <td>2009-01-21 10:44</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='8' /></td>
     <td style="text-align:center;">08</td>
     <td>联发科助力 Windows Mobile加入山寨大军</td>
     <td>联发科</td>
     <td>2009-01-22 16:37</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='9' /></td>
     <td style="text-align:center;">09</td>
     <td>Nokia的开源Qt开发工具4.5版发布</td>
     <td>Nokia</td>
     <td>2009-01-28 14:08</td>
    </tr>
    <tr>
     <td style="text-align:center;"><input type='checkbox' name='noticeSelect' value='10' /></td>
     <td style="text-align:center;">10</td>
     <td>GCC将接受IBM代码支持自动平行优化</td>
     <td>IBM</td>
     <td>2009-02-01 21:14</td>
    </tr>   
   </tbody>
  </table>
 </div>
 <br />
 <input type='button' id='alternation' value='交替显示' /> <input type='button' id='alternationThree' value='三色替换' /><br />
 <input type="button" id='selectTr' value='选择行' /><br />
 <input type='button' id='sort' value='排序' /> <input type='button' id='getSequence' value='获取值序列' /><br />
 <input type='button' id='getSelected' value='获取表格中选取的值' /> <input type='button' id='dateDesc' value='按日期降序' />
</body>
</html>

 

from:http://www.jb51.net/article/19405.htm

zhaoyh82
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现表格列拖动
时光淡然
08-30 870
jquery实现表格列拖动 引入插件插件地址http://www.bacubacu.com/colresizable/#samples 在不同电脑屏幕大小下，列表列宽都可以缩放，不影响其他列。 允许调整的列溢出父容器。 代码： var table = this.container.find("table.resizableTable"); table.colResizable({ resizeMode:'overflow' }) 小结： 使用bootstrap实现时，
不换行隐藏溢出表格的文本,并省略号表示隐藏部分
banying5965的博客
07-12 211
table{ table-layout:fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 */ overflow:hidden;/* 内容超出宽度时...
表格拖拽,表格行拖拽排序,跨表格拖拽
生而为人我很抱歉
04-02 642
由于开发时要时用到表格行拖拽排序功能，但是网上看了很多都不符合我的需求，我需要从一个表格拖动到另外一个表格，下面是我自己写的一个jquery表格拖拽排序插件： tableDrag.js //;(function($){ // $.fn.extend({ // "drag":function(){ // // return this; // } // }); //})($); (fun...
jquery+Sortable实现表格行拖动排序实现表格行拖动排序
qq_33407279的博客
11-21 607
当某被拖动的对象在另一对象容器范围内拖动时触发此事件。- 在一个拖动过程中，释放鼠标键时触发此事件。- 用户开始拖动元素时触发。
关于jquery解析json数据时动态追加tr 指定条数换行问题 实现list的 并列显示效果
dhc10000的专栏
11-23 1879
$(document).ready(                 function() {                     $.ajax({                         type : "post",                         url : "event_index!findList.action",
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
10-20
主要介绍了jQuery实现Table表格隔行变色及高亮显示当前选择行效果,涉及jQuery针对table元素遍历、运算、样式及鼠标事件动态响应相关操作技巧,需要的朋友可以参考下
jQuery实现表格颜色交替显示的方法
10-24
主要介绍了jQuery实现表格颜色交替显示的方法,涉及jQuery操作表格样式的技巧,非常具有实用价值,需要的朋友可以参考下
jQuery实现表格奇偶行显示不同背景色 就这么简单
01-21
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type=text/...
jQuery实现table表格中行数据上下拖拽功能
wa_ka_ka的博客
07-09 972
jQuery实现table表格中行数据上下拖拽功能 $("#table").sortable({ cursor: "move", axis: "y", //只在y轴进行拖动 item: "tr", //拖动的对象 opacity: 0.5, //拖动时，透明度为0.5 revert: false, //释放时，增加动画 cancel: "tfoot,thead", //禁止表头和表末拖拽 update: function(event,u
基于jquery可拖动表格
05-22
基于jquery可拖动表格 jquery 表格行可拖动 源码 使用说明
jQuery拖动调整表格列宽度-resizableColumns
05-23
jquery-resizable-columns是一个实现表格列宽可以拖动调整的jQuery插件 $(function(){ $("#myTable").resizableColumns({ store: window.store }); })
jquery实现table拖拽列效果
12-27
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
表格拖动排序
04-08
表格行拖动排序，非常实用，支持ajax，拖动后的顺序可保存。
超级简单的jquery操作表格方法
10-25
主要介绍了超级简单的jquery操作表格方法,可实现针对表格行与列的增加及删除操作,是非常实用的技巧,需要的朋友可以参考下
前端开发学习05 - 功能元素2 - 表格标签
qq_47918606的博客
08-19 321
个人学习记录
通过jquery实现拖拽table表头改变列宽
XIAIBIANCHENG的专栏
01-22 1532
直接上代码,有注释: <!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%
数据仓库基本概念
weixin_36190755的博客
09-29 1162
什么是数据仓库？ 数据仓库，英文名称为Data Warehouse，数据仓库（Data Warehouse）是一个面向主题的（Subject Oriented）、集成的（Integrated）、相对稳定的（Non-Volatile）、反映历史变化（Time Variant）的数据集合，用于支持管理决策(Decision Making Support)。 ——比尔·恩门（Bill Inmon）在1991年出版的“Building the Data Warehouse”（《建立数据仓库》...
html多选框 jquery,jquery中表单 多选框的一种巧妙写法
weixin_35367646的博客
06-04 172
$(function(){$("tbody>tr:odd").addClass("odd");$("tbody>tr:even").addClass("even");$('tbody>tr').click(function(){var hasSelected = $(this).hasClass('selected');$(this)[hasSelected ? "removeC...
jquery表格隔行变色和当前行变色
最新发布
04-11
根据描述，似乎您是问如何使用jQuery改变表格行的颜色和当前行的颜色。 要改变表格行的颜色，可以选择使用CSS或jQuery。如果选择使用CSS，则可以使用以下代码： ``` tr { background-color: #ddd; } ``` 如果选择使用jQuery，则可以使用以下代码： ``` $("tr").css("background-color", "#ddd"); ``` 要改变当前行的颜色，可以在jQuery中使用以下代码： ``` $("tr").click(function(){ $(this).css("background-color", "#ddd"); }); ``` 这将使当前被单击的行变为灰色。您可以更改颜色代码以符合您的需要。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值