当前位置：首页 > 网页特效 > 表格

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

分类：表格日期：2024-05-14 点击(3) 评论(0)

简介

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

```html
<link rel="stylesheet" href="path/to/tablecellsselection.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/tablecellsselection.js"></script>    
```      
#####  HTML结构
表格可以是任何普通的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方法来初始化该表格单元格选择插件。

```html
jQuery(document).ready(function($) {
    $('#tablecellsselection').tableCellsSelection();
});
```
#####  API
- TableCellsSelection表格单元格选择插件有以下一些可用的API。

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

```html
// 在指定的表格中应用插件
//下面的语句相当于  $('.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');        
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果