Excel样式表格单元格选择jQuery插件

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

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

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

使用方法

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

<link rel="stylesheet" href="path/to/tablecellsselection.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/tablecellsselection.js"></script>          
                

HTML结构

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

<table class="table table-bordered" id="tablecellsselection">
      <thead>
          <tr>
              <th rowspan="2">Table summary</th>
              <th colspan="3">Group 1</th>
              <th colspan="3">Group 2</th>
          </tr>
          <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
              <th>Column 5</th>
              <th>Column 6</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>Property 1</th>
              <td>$10</td>
              <td>$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 2</th>
              <td>$10</td>
              <td rowspan="3">$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 3</th>
              <td>$10</td>
              <td colspan="3">$30</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 4</th>
              <td>$10</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 5</th>
              <td>$10</td>
              <td>$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 6</th>
              <td>$10</td>
              <td>$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
      </tbody>
  </table>
                

初始化插件

在页面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。