Question

Maybe this question is so easy… I understand html, css, the dom and javascript pretty good, but I’m having a very tough time while trying to get jQuery to work for me. Let’s say I have the following 4 columns table, with columns 1 and 3 hidden:

<table id="mytable">
  <thead>  
    <tr> 
      <th class="hidden">Column1</th> 
      <th>Column2</th>    
      <th class="hidden">Column3</th> 
      <th>Column4</th>
    </tr>
  </thead>
  <tbody> 
    <tr> 
      <td class="hidden">Value1</td> 
      <td>Isle of Palms</td>   
      <td class="hidden">Value3</td>  
      <td>Value4</td> 
    </tr> 
  </tbody>
</table>      

Then I use the following code to hide the hidden class columns:

$(function() { 
    $('.hidden').hide();
});             

Yesterday some of you told me how to get the first column content by using:

$(function() { 
    $(this).find('td.hidden:first').html();
});             

What I want to do is to show an alert or Thickbox showing the header name and cell value for all the hidden columns:

Column1 = Value1
Column3 = Value3

If it were easier to do, I could group all the hidden columns at the beginning (to the left) of the table.

Thanks in advance.

Answer 1

Try this out

var mytable = $('#mytable');

$('#mytable > tbody').delegate('tr', 'click', function (e) {

    trToShow = $(this);

    var keyValueInfo = mytable.find('th.hidden').map(function () {

        // for each th.hidden element, get the corresponding "key = value" string

        var i = $(this).index(); // get the index of the th element

        // get the td element with the same index as the above th, and get the text inside it
        var value = trToShow.find('td.hidden').filter(function () {
            return $(this).index() === i;
        }).text();

        // The above could also be done as (Read documentation of :eq selector)
        // var value = trToShow.find('td:eq(' + i + ')').text();

        // get the text inside this th element, which would be our key
        var key = $(this).text();

        // return the "key = value" string wrapped up in a div element
        return '<div>' + key + ' = ' + value + '</div>';

    }).toArray().join('');

});

// Show a dialog with the above content inside it
show_dialog_with_stuff(keyValueInfo);

Read more up on index

I haven’t tested it, but if any, there should only be minor silly errors. Tested here http://jsfiddle.net/mb6Gd/