tablecellsselection是一款效果类似Excel或GoogleDocs样式的表格单元格选择jQuery插件。该插件可以在点击某个或多个单元格时，使被选择的单元格高亮显示。下面的两张图说明了使用插件前后的效果。

使用插件之前选择表格单元格的效果：

使用插件之后选择表格单元格的效果：

使用方法

在页面中引入tablecellsselection.css和jquery、tablecellsselection.js文件。

HTML结构

表格可以是任何普通的HTML表格。

      

          

              
Table summary
              
Group 1
              
Group 2
          
          

              
Column 1
              
Column 2
              
Column 3
              
Column 4
              
Column 5
              
Column 6
          
      
      

          

              
Property 1
              
$10
              
$20
              
$30
              
$40
              
$50
              
$60
          
          

              
Property 2
              
$10
              
$20
              
$30
              
$40
              
$50
              
$60
          
          

              
Property 3
              
$10
              
$30
              
$60
          
          

              
Property 4
              
$10
              
$30
              
$40
              
$50
              
$60
          
          

              
Property 5
              
$10
              
$20
              
$30
              
$40
              
$50
              
$60
          
          

              
Property 6
              
$10
              
$20
              
$30
              
$40
              
$50
              
$60
          
      
  
                

初始化插件

在页面DOM元素加载完毕之后，可以通过tableCellsSelection方法来初始化该表格单元格选择插件。

jQuery(document).ready(function($) {
    $('#tablecellsselection').tableCellsSelection();
});
                

API

TableCellsSelection表格单元格选择插件有以下一些可用的API。

• init：初始化表格，为表格添加需要的class类和事件监听。
• destroy：销毁插件，移除相应的class类和事件监听。
• selectedCells：以jQuey对象的形式返回被选择的单元格。
• removeDocumentHtmlChanges：恢复所有被插件修改的HTML DOM元素。

例如：

// 在指定的表格中应用插件
//下面的语句相当于  $('.tables-with.selection').tableCellsSelection('init');
$('.tables-with.selection').tableCellsSelection();
var testTable = $('#test');

// 在table#test中选择单元格
var $selectedCells = $('#test').tableCellsSelection('selectedCells');

// 在获取表格的HTML内容之前清除有插件修改的标签
testTable.tableCellsSelection('removeDocumentHtmlChanges');

// 获取表格的HTML内容
$testTableContent = testTable.html();

// 恢复插件修改的HTML内容

// 销毁插件
testTable.tableCellsSelection('destroy');                  
                

tablecellsselection表格单元格选择插件的github地址为：https://github.com/likemusic/tablecellsselection。