Tablecellsselection
jQuery plugin for intuitive table's cells selection
Install / Use
/learn @likemusic/TablecellsselectionREADME
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.

Usage
- Add stylesheet on your html page
<link rel="stylesheet" href="tablecellsselection.css">
- Include tablecellsselection.js before closing tag body
<script src="tablecellsselection.js"></script>
- Apply this plugin to any tables
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
//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
#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).
Related Skills
node-connect
344.4kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
99.2kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
344.4kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
344.4kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
