tablecellsselection

KO | EN

gitlite — search

#python #hacktoberfest #docker #golang #nodejs #android #flutter #go #deep-learning #rust #pytorch #database

tablecellsselection

★ 13 Open GitHub ↗

jQuery plugin for intuitive table's cells selection

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# TableCellsSelection - jQuery plugin for intuitive table's cells selection (like Excel or Google Docs)

This jQuery plugin for emulate rectangular highlighting cells on selection .

Make highlighting cells as it happens in GoogleDocs or Excel e.q. Can be useful in WYSIWYG editors.

![TableCellSelection](https://raw.githubusercontent.com/likemusic/tablecellsselection/master/tablecellsselection.gif)

# Usage
* Add stylesheet on your html page
```html
	<link rel="stylesheet" href="tablecellsselection.css">
```
* Include tablecellsselection.js before closing tag body
```html
	<script src="tablecellsselection.js"></script>
```
*  Apply this plugin to any tables
```javascript
	jQuery(document).ready(function($) {
		$('.tables-with-selection').tableCellsSelection();
	});
```

# TableCellsSelection API

- `init` - apply plugin to jQuery object. Add plugin's classes and attach event handlers to selected tables.
 - `destroy` - delete cells selection functionality from selected tables. Delete plugin's classes and detach events listenters.
 - `selectedCells` - return selected cells as jQuery-object.
 - `removeDocumentHtmlChanges` - revert all HTML DOM changes, made by plugin. May be helpfull for call by wisiwig-editor's on save() method for clear markup.

TODO:
 - `addDocumentHtmlChanges` - apply HTML DOM changes, required by plugin to work.

## Example of usage API
```javascript
//Apply plugin to selected tables.
$('.tables-with.selection').tableCellsSelection();//equal to  `$('.tables-with.selection').tableCellsSelection('init');`
var testTable = $('#test');

//select some cells in table#test

//Get selected cells in #test table.
var $selectedCells = $('#test').tableCellsSelection('selectedCells');

//Before get table html-content clear markup from plugin changes.
testTable.tableCellsSelection('removeDocumentHtmlChanges');

//Get table html-content
$testTableContent = testTable.html();

//Restore HTML changes required by plugin to work.

//Make table cells not intuitive selectable
testTable.tableCellsSelection('destroy');
```

# Appreciation

This is a almost completely rewritten version of [cells-selector plugin](http://cells-selector.02-web.ru/)

#TODO
- Integrate with browseer's selection API (if possible).
- Implement valid table cells/columns/rows selection/deselection.
- Implement valid `addDocumentHtmlChanges` - apply HTML DOM changes, required by plugin to work.

# Licence
The MIT License (MIT).

tablecellsselection

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README