jQuery创建tableSelecter(模拟excel的行选择)

最新推荐文章于 2024-09-05 11:43:38 发布

royfj

最新推荐文章于 2024-09-05 11:43:38 发布

阅读量1.9k

点赞数

文章标签： jquery excel function javascript 测试 blog

本文链接：https://blog.youkuaiyun.com/royfj/article/details/1488672

版权

本文介绍如何利用jQuery创建一个名为tableSelector的功能，该功能可让网页表格中的行选择行为类似于Excel，实现多选和单选操作，便于数据处理和测试。通过巧妙运用jQuery的选择器和事件处理，可以轻松实现这一交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章本来是放在百度blog的，觉得不是很好就移到这里。

tableSelecter的功能就是模仿MS的Excel表格的选择，当然功能弱了点。

使用jQuery已经好几个月了，总得来说，这个javascript类库的确很方便使用。当然这种方便如果对于没有深入理解javascript语言来说未尝是好事。不过事实上，能用就行，这种说法也是不错的。废话不多说了，要开始学习jQuery最好一些javascript的基础，毕竟jQuery是基于javascript的。

这边有篇很经典的文章，可以去好好看看，当然要更深入的了解，可以参考官方的Api文档。

现在我们就开始了。

按照文章，首先新建jquery.tableSelecter.js文件，最好还有个test.html来测试这个Plugin（主要是为了扩展才写成Plugin的）。

* This is written by Royfj,2006/12/18

jQuery.fn.tableSelecter = function(options) {

 var setting = {
  version:0.1
 };
             if(options) {
  jQuery.extend(setting, options);
 };//这些代码在那篇文章里有说明，我这里就不多说了
             
             //获取表格的所有行
             var getTrs = function(){
              return $("tr",this)
             };
             
             //获取表格行的数目
             var getTrsCount = function(){
              return $("tr",this).length;
             }
             //高亮鼠标移动
              var highlight = function(){
  var trs = null;
  if(setting.ableHeaderHighLight)
   trs = getTRs();
  else
   trs = getTRs().gt(0);
  
  $(trs).each(function(){
   $(this).mouseover(function(){
    //setOverClass(this);//设置鼠标在此行上的样式
   }).mouseout(function(){
    //removeOverClass(this);//删除鼠标移出时对象的样式
   });
  });
 }

就写到这里，那么就可以进行测试了。在test.html里写个表格，设置它的id为tbTest，然后在

$(document).ready(function(){

 $("#tbTest").tableSelecter();

});

这样就可以实现鼠标移动高亮效果了。