Geek Answers Handbook

Creating a table with resizable columns and selectable rows with jQuery user interface

NOTE. My initial question was whether I should use <div> or <table> for this task. I myself found the answer: <div> more than twice as slow on Firefox and Chrome if you have ~ 2000 lines. Therefore, for this you need to use <table> . I decided to republish my question to show how to do it (table with resizable columns and selectable rows using jQuery user interface). Hope this will be helpful to everyone.

I am making a web application (mainly for data entry and intranet use). You need to make some data from the SQL table in a standard way (rows as rows, columns as columns), but have some requirements:

  • The data is accepted as a hard-format JSON array and must be inserted from JavaScript.
  • Columns need to be changed.
  • Rows must be selected.
  • The body should be scrollable, the title should remain higher.

There are many predefined JavaScript components for parts of this functionality, but the most complete ones are overblown, cost a lot, and have bugs.

As I should already use jQuery-ui for modal dialogs and tabs, I decided to try resizable and selectable effects. I managed to get them to work for a standard HTML table using some tricks. Here is the code.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' src='../Scripts/jQuery.js'></script> <script type='text/javascript' src='../Scripts/jQuery-ui.js'></script> <link href="../Css/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /> <style type='text/css'> .selectable .ui-selecting { background: #FECA40; } .selectable .ui-selected { background: #F39814; color: white; } .NCList table { table-layout:fixed; } .nc-cell { overflow: hidden; white-space:nowrap; } .NCList .ui-resizable-e { background: gray; } .NCList .y-scroll { overflow-y:auto; overflow-x:hidden; } </style> <script type="text/javascript"> $(function() { var element = $('#MyParentDiv'); $(".selectable", element).selectable({filter: 'tr'}); $(".th0", element).resizable({ alsoResize: '#MyParentDiv .header-container', stop: function(event, ui) { var width1 = $(".th0", element).width(); $('.col0', element).width(width1); width1 = $(".header-container", element).width(); $('.y-scroll', element).width(width1); }, handles: 'e'}); $(".th1", element).resizable({ alsoResize: '#MyParentDiv .header-container', stop: function(event, ui) { var width1 = $(".th1", element).width(); $('.col1', element).width(width1); width1 = $(".header-container", element).width(); $('.y-scroll', element).width(width1); }, handles: 'e'}); }); </script> </head> <body> <div id="MyParentDiv" class="NCList"> <div class="header-container" style="width:215px;"> <table><thead><tr> <th><div class="nc-cell th0" style="width:100px;"> Short name </div></th> <th><div class="nc-cell th1" style="width:100px;"> Name </div></th> </tr></thead></table> </div> <div class="y-scroll" style="max-height:100px;width:215px;"> <table class="valuefield"> <tbody class="selectable"> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> <tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td> <td><div class="nc-cell col1" style="width: 100px">Some test values</div></td> </tr> </tbody> </table> </div> </div> </body> <html>
+4
source share
2 answers

DIVs are more than twice as slow as TABLE if you use the jQuery.appendTo method to add 2,000 lines in all major browsers. So I decided to use TABLES.

+1
source

Purely from a semantic point of view, you should use tables in which data should be presented. DIV is more for presenting and structuring the design of your page.

+1
source

More articles:


All Articles