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。