javascript - HTML table with fixed headers? -


is there cross-browser css/javascript technique display long html table such column headers stay fixed on-screen , not scroll table body. think of "freeze panes" effect in microsoft excel.

i want able scroll through contents of table, able see column headers @ top.

i looking solution while , found of answers not working or not suitable situation, wrote simple solution jquery.

this solution outline.

  1. clone table needs have fixed header , place cloned copy on top of original
  2. remove table body top table
  3. remove table header bottom table
  4. adjust column widths. (we remembering original column widths)

below code. here's demo fixed header demo

<head>     <script       src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">     </script>     <script>      function scrolify(tblasjqueryobject, height){         var otbl = tblasjqueryobject;          // large tables can remove 4 lines below         // , wrap table <div> in mark-up , assign         // height , overflow property           var otbldiv = $("<div/>");         otbldiv.css('height', height);         otbldiv.css('overflow','scroll');                        otbl.wrap(otbldiv);          // save original width         otbl.attr("data-item-original-width", otbl.width());         otbl.find('thead tr td').each(function(){             $(this).attr("data-item-original-width",$(this).width());         });          otbl.find('tbody tr:eq(0) td').each(function(){             $(this).attr("data-item-original-width",$(this).width());         });                            // clone original table         var newtbl = otbl.clone();          // remove table header original table         otbl.find('thead tr').remove();                          // remove table body new table         newtbl.find('tbody tr').remove();             otbl.parent().parent().prepend(newtbl);         newtbl.wrap("<div/>");          // replace original column width                         newtbl.width(newtbl.attr('data-item-original-width'));         newtbl.find('thead tr td').each(function(){             $(this).width($(this).attr("data-item-original-width"));         });              otbl.width(otbl.attr('data-item-original-width'));               otbl.find('tbody tr:eq(0) td').each(function(){             $(this).width($(this).attr("data-item-original-width"));         });                      }      $(document).ready(function(){         scrolify($('#tblneedsscrolling'), 160); // 160 height     });       </script>   </head>  <body>     <div style="width:300px;border:6px green solid;">         <table border="1" width="100%" id="tblneedsscrolling">             <thead>                 <tr><th>header 1</th><th>header 2</th></tr>             </thead>             <tbody>                 <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>                 <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>                 <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>                 <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>                            <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>                 <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>                 <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>                 <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>                        </tbody>         </table>     </div>  </body>

this solution works in chrome & ie. since based on jquery should work in other jquery supported browsers well.


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more