Select table cell as a group

Question

In this table, I want to select multiple cells as a group. You can select a target cell by clicking on it, but I also want to click and drag to cover multiple cells as a group.

Is that possible to achieve that without any plugins (just use JQuery)?

This is what I want to achieve:

The array content will be: ["3-2", "3-3", "4-2", "4-3", "5-2", "5-3"]

Here is what I try so far:

 var group = []; var columnIndex = 7, rowIndex = 10; var $tableContainer = $('#tablecontainer'), $table = $tableContainer.append('<table border="1" id="table1"></table>'), $thead = $table.find('table').append('<thead></thead>'), $tbody = $table.find('table').append('<tbody></tbody>'); var $columnNumber = ""; var $tdNumber = ""; for (var col = 1; col <= columnIndex; col++) { $columnNumber += "<th>Column " + col + "</th>"; $tdNumber += "<td style='text-align: center; vertical-align: middle; color:red'></td>"; } $thead = $thead.append('<tr><th>0</th>' + $columnNumber + '</tr>'); for (var row = 1; row <= rowIndex; row++) { $tbody = $tbody.append('<tr><td>Row ' + row + '</td>' + $tdNumber + '</tr>'); } $('#table1 > tbody > tr > td').hover(function() { var colIndex = $(this).parent().children().index($(this)); var rowIndex = $(this).parent().parent().children().index($(this).parent()); $(this).attr("title", 'Row: ' + rowIndex + ', Column: ' + colIndex); // console.log('Row: ' + rowIndex + ', Column: ' + colIndex); }); $('#table1 > tbody > tr > td').click(function() { var colIndex = $(this).parent().children().index($(this)); var rowIndex = $(this).parent().parent().children().index($(this).parent()); group.push(rowIndex + "-" + colIndex); console.log(group); $(this).css("background-color", "red"); // console.log('Row: ' + rowIndex + ', Column: ' + colIndex); }); 

 #table1>tbody>tr>td:hover { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tablecontainer"></div> 

Any help would be appreciated!

Answer 1

The functionality you want to achieve is possible by using jquery mouseover function. I made a fiddle to get the desired output as you expect.

Fiddle

Hope this helps you in solving the issue.

-Help :)