Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 28th, 2012  |  syntax: None  |  size: 2.61 KB  |  hits: 12  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Highlight specific rows of a table on clicking a column value. javascript help needed
  2. <a onclick="hl(this)">1,2,5</a>
  3.  
  4.      <table>
  5.      <tr>
  6.      <tr> <td>.....</td></tr>
  7.      <tr> <td>.....</td></tr>
  8.      <tr> <td>.....</td></tr>
  9.      <tr> <td>.....</td></tr>
  10.      </tr>
  11.      </table>
  12.        
  13. var m=table.rowIndex[1]
  14.        
  15. m.style.background="something"
  16.        
  17. function hl(anchor) {
  18.     var table = hl.nextSibling;
  19.     while (table && table.nodeName.toUpperCase() !== "TABLE") {
  20.         table = table.nextSibling;
  21.     }
  22.     if (table) {
  23.         var rows = table.getElementsByTagName('tr');
  24.         rows[0].className += " highlighted";
  25.         rows[1].className += " highlighted";
  26.         rows[4].className += " highlighted";
  27.     }
  28. }
  29.        
  30. <script>
  31.     function hl(el){
  32.  
  33.         arr = (el.innerHTML).split(",")
  34.  
  35.         var t = document.getElementById("tbl")
  36.         for(var i=0; i<arr.length; i++){
  37.             t.rows[arr[i]].style.backgroundColor  ="yellow";
  38.         }
  39.         return false;
  40.     }
  41. </script>
  42.        
  43. <table id="tbl">
  44.     <tr ><td >row 1</td></tr>
  45.     <tr><td>row 2</td></tr>
  46.     <tr><td>row 3</td></tr>
  47.     <tr><td>row 4</td></tr>
  48. </table>
  49. <a href="#" onclick="hl(this)">1,2,3</a>
  50.        
  51. function regEvents(){
  52.     trs = document.getElementsByTagName("tr");
  53.     for (var i=0; i<trs.length;i++){
  54.         trs[i].onclick = hilite;
  55.     }
  56. }
  57. function hilite(){
  58. this.style.background = "yellow";
  59. }
  60.        
  61. <table id="tbl">
  62.     <tr ><td >row 1</td></tr>
  63.     <tr><td>row 2</td></tr>
  64.     <tr><td>row 3</td></tr>
  65.     <tr><td>row 4</td></tr>
  66. </table>
  67.        
  68. <script>
  69. regEvents();
  70. </script>
  71.        
  72. <script>
  73. function hilightRows(id, rowindexes) {
  74.   var table = document.getElementById(id);
  75.   var rows;
  76.  
  77.   if (table && rowindexes) {
  78.  
  79.     // Remove any current highlighting
  80.     for (var j=0, jLen = table.rows.length; j < jLen; j++) {
  81.       table.rows[j].style.backgroundColor = '';
  82.     }
  83.  
  84.     // Add new highlighting
  85.     for (var i=0, iLen = rowindexes.length; i<iLen; i++) {
  86.       table.rows[rowindexes[i]].style.backgroundColor = 'red';
  87.     }
  88.   }
  89. }
  90. </script>
  91.  
  92.  
  93. <button onclick="hilightRows('t0', [1,2,5])">1, 2, 5</button>      
  94. <button onclick="hilightRows('t0', [3,0])">3, 0</button>      
  95. <button onclick="hilightRows('t0', [])">Remove highlight</button>      
  96.  
  97. <table id="t0">
  98.   <tr><td>.....
  99.   <tr><td>.....
  100.   <tr><td>.....
  101.   <tr><td>.....
  102.   <tr><td>.....
  103.   <tr><td>.....
  104.   <tr><td>.....
  105. </table>
  106.        
  107. $('#thingtobeclicked').click(function()
  108. {
  109.    $('.selected').removeClass('selected');
  110.    $(this).data('indices').each(function(i){
  111.      $('#myTable tr:nth-child(i)').addClass('selected');
  112.    });
  113. });
  114.        
  115. <a href='#' id='thingtobeclicked' data-indices='1,3,5'></a>
  116. <table id='myTable'>...
create a new version of this paste RAW Paste Data