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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!