Home > jquery > HTML Table with Selectable cells

HTML Table with Selectable cells

June 11Hits:6
Advertisement

I'm working on a scheduling table that user' can select cells (which will be gathered with jQuery using data attributes) but I'm trying to work out the best way for user' to be able to select rows and columns in a usable fashion. At the moment you can click and drag cells to select them and you can select rows.

So far this is what I've got, any suggestions would be greatly appreciated.

<!DOCTYPE html>   <html>     <head>       <meta charset="utf-8"/>       <style type="text/css" media="screen">         table#power_schedule td         {           width: 140px;         }          table#power_schedule td.selectable, table#power_schedule th {           font-size: 12px;           width: 70px;           height: 25px;           text-align: center;         }          table#power_schedule td.selectable {           width: 60px;           background-color:#77DD77;           border: 1px solid #68C168;         }          table#power_schedule td.highlighted {           background-color:#FF6961;           border: 1px solid #E8615A;         }          table#power_schedule td:first-child {           cursor: pointer;         }       </style>     </head>     <body>       <table cellpadding="0" cellspacing="0" id="power_schedule">         <thead>           <th/>           <th>Mon</th>           <th>Tue</th>           <th>Wed</th>           <th>Thu</th>           <th>Fri</th>           <th>Sat</th>           <th>Sun</th>         </thead>         <tr>           <td>00:00-00:30</td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>         </tr>         <tr>           <td>00:30-01:00</td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>         </tr>         <tr>           <td>01:00-01:30</td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>           <td class="selectable"> </td>         </tr>       </table>        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>       <script type="text/javascript" charset="utf-8">         $(function () {           // Create table dragging functionality           var isMouseDown = false;           var highlighted           $("table#power_schedule td.selectable")             .mousedown(function () {               isMouseDown = true;               highlighted = $(this).hasClass('highlighted')                if ( highlighted ) {                 $(this).removeClass('highlighted')               } else {                 $(this).addClass('highlighted')               }               return false; // prevent text selection             })             .mouseover(function () {               if (isMouseDown) {                 if ( highlighted ) {                   $(this).removeClass('highlighted')                 } else {                   $(this).addClass('highlighted')                 }               }             })             .bind("selectstart", function () {               return false; // prevent text selection in IE             })            $('table#power_schedule td:first-child')               .mousedown(function() {                   isMouseDown = true;                    $(this).parent().find('td:not(:first-of-type)').toggleClass('highlighted')                   $(this).css('cursor', 'pointer')                   return false               })               .mouseover(function() {                   if (isMouseDown) {                       $(this).parent().find('td:not(:first-of-type)').toggleClass('highlighted')                   }               })             .bind("selectstart", function () {               return false; // prevent text selection in IE             })            $(document)               .mouseup(function () {               isMouseDown = false           })         });       </script>     </body>   </html> 

Answers

Two quick comments:

  • The selection didn't work quite as I expected. It seems that if I click-and-hold, any cell I drag the mouse over is also selected. The appearance made me expect a rectangular selection, like you get in a spreadsheet app.

    Also, I didn't realise I could select entire rows at once before reading your post. I'd recommend adding some sort of styling to make it clear that the row labels aren't just plain text – they're clickable!

  • I would move the code for changing the highlighted class of a cell into a function. Something like:
    function toggleHighlightingOfCell(cell) {
        isHighlighted = cell.hasClass('highlighted');
        if (isHighlighted) {
            cell.removeClass('highlighted');
        } else {
            cell.addClass('highlighted');
        }
    }
    
    

    which you invoke as

    toggleHighlightingOfCell($(this));
    
    

    Note also that I've changed the name of the variable so that it's not the same as the class you're using – this reduces the ambiguity a little.

Tags:html, jquery

Related Articles

  • HTML Table with Selectable cellsJune 11

    I'm working on a scheduling table that user' can select cells (which will be gathered with jQuery using data attributes) but I'm trying to work out the best way for user' to be able to select rows and columns in a usable fashion. At the moment you ca

  • Unable to sort selected cells within the Table in Excel 2013November 20

    I created a Table in Excel 2013 but I want to sort only selected cells. The table range is A1:I200 but I only want to sort A150:I200. I tried selecting the cells, right click, sort, it sorted the whole table. Is there a solution on this? ------------

  • Applying style for "focused" cell in table with disabled cell selectionJanuary 26

    I am searching for a way do style focused/selected cell. I observe that when I set tableView.getSelectionModel().setCellSelectionEnabled(false) I do not have any indication whether cell is focused/selected. Only row is highlight. But when I press [F2

  • Select cell by row & column namesNovember 22

    I'd like to know if it is possible to select a cell by the header / row name? I know I can select the number of working days using B2, but is there something more elegant like Days[Work] ? A B C 1 Class Days 2 Work 220 3 Sick 5 --------------Solution

  • Selecting Cells in a raster layerJune 26

    I am working on a watershed analysis project. The goal of the project is to create a model that will simulate changes the effect that different land uses will have on the watershed as a whole. Using python, I need to create a user friendly model that

  • Insert pop out table into excel cell?August 19

    Is it possible to create a pop out table/dialog in a clickable cell in Excel 2010? I would then like the sum of the table to show up in the cell. Right now I am using a simple workaround, wherein I am entering each new number in the function bar =0+n

  • Fade all the un-selected cells in excel 2013November 20

    I have a long table in Excel 2013 and it is very hard to read and focus on a specific cell. I want to know if there is any way to automatically fade all the un-selected cells? By fade, I mean when I select a cell, the background and the font colors o

  • How to link Table View dynamic cells to specific View Controllers?January 19

    I'm a beginner developer in iOS 9 and Swift 2. I have a Table View with dynamic and grouped content and I want to link each cell with a specific View Controller (not a detail controller). I know how to do this using static cells with segues, but how

  • Is there anyway to make particular-selected cells in MS Excel as read-only?February 15

    By LOCKING the cells, and switching protection on will make whole file read-only .. But I want to make only few/selected cells as read-only .. that means, those cells cannot be edited anymore .. Is there any facility as such pre-defined in MS-office

  • Getting error - The selected cells are read-onlyOctober 12

    hi I am trying to copy data from one list to another list using Datasheet view and I am getting above error. How to solve it? I use WSS 3.0 -saumil --------------Solutions------------- I've also seen this on a links list where the first column has th

  • Is there a way to tell which cells reference a selected cell in Excel?

    Is there a way to tell which cells reference a selected cell in Excel?December 6

    In Excel, you can tell a cell to reference another cell in order to calculate its value. I'd like to be to do the opposite, to get any cells that reference the currently-selected cell. Is this at all possible in Excel, either as one of the built-in f

  • How can I create a LaTeX table with merged cells in 2nd column or laterApril 13

    I wish to generate a LaTeX table with merged cells in the 2nd column. Any examples I have seen so far have merged cells in the 1st column. The text also needs to wrap with in the cell. (couldn't post pictures yet!) Basically , I have 3 columns, 15 ro

  • How do you apply a function to all values in selected cells?July 6

    I was entering timesheet data (in minutes) into an Excel spreadsheet. Then the requirements changed - the data actually needs to be in hours. Is there a way to divide all the cells by 60 in place without using formulas? Ideally, I'd like to select al

  • The selected cells are read-only when trying to delete items in DataSheet modeAugust 12

    The selected cells are read-only when trying to delete items in DataSheet mode. Anyone cmae across this as i need to delete my blog list items in bulk i don't want to delete them individually its going to take toooo long. Thanks --------------Solutio

  • MySQL Locks while CREATE TABLE AS SELECT

    MySQL Locks while CREATE TABLE AS SELECTMarch 23

    I am running the following (dummy) query CREATE TABLE large_temp_table AS SELECT a.*, b.*, c.* FROM a LEFT JOIN b ON a.foo = b.foo LEFT JOIN c ON a.bar = c.bar Suppose the query takes 10 minutes to run. Trying to update values in tables a, b or c whi

  • A table with square cells

    A table with square cellsMarch 28

    A friend is trying to make some auto-generated bingo boards, and LaTeX seems like an obvious choice - nothing fancy, just a 5x5 table with square cells, centered text, and line wrapping if necessary. After some searching, I'm at a bit of a loss on se

  • Select Cells to End of NotebookOctober 30

    I'd like to create a keyboard shortcut that will allow me to select all of the cells from the current cell until the end of the notebook, similar to how ShiftCtrlEnd functions when editing text in most Windows applications. By editing KeyEventTransla

  • Possible to evaluate only selected cells?November 19

    Is it possible to evaluate only the selected cells programmatically that I am interested in? Say in current cell to bottom of the notebook, instead of evaluate notebook or cells? --------------Solutions------------- Two buttons of my ButtonTools pale

  • Numbers: Can I highlight the row and column of the selected cell?

    Numbers: Can I highlight the row and column of the selected cell?January 7

    When reading larger spreadsheets, it would be helpful to highlight the row and column that the currently selected cell is in. I'm not talking about conditional formatting or anything in the spreadsheet itself, I'm just talking about a viewing option.

  • Select Table Vs Select View?January 23

    I was told from a SQL-DBA that there is a huge gap in performance between these statements, both statements are called from a stored procedure: -- Procedure that select from table directly Select * From [Table] Where condition -- Procedure that selec

Copyright (C) 2018 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.748 s.