如何从表头（th）中获取相应的表列（td）？

Question

I want to get the entire column of a table header.

For example, I want to select the table header "Address" to hide the address column, and select the "Phone" header to show the correspondent column.

<table>
<thead> 
    <tr>
        <th id="name">Name</th>
        <th id="address">Address</th>
        <th id="address" class='hidden'>Address</th>
    </tr>
</thead> 
<tbody>
    <tr>
        <td>Freddy</td>
        <td>Nightmare Street</td>
        <td class='hidden'>123</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>Lost Street</td>
        <td class='hidden'>3456</td>
    </tr>
</tbody>

I want to do something like http://www.google.com/finance?q=apl (see the related companies table) (click the "add or remove columns" link)

Answer 1

Something like this would work -

$('th').click(function() {
    var index = $(this).index()+1;
    $('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide()
});

The code above will hide the relevant column if you click on the header, the logic could be changed to suit your requirements though.

Demo - http://jsfiddle.net/LUDWQ/

Answer 2

With a couple simple modifications to your HTML, I'd do something like the following (framework-less JS):

HTML:

<input class="chk" type="checkbox" checked="checked" data-index="0">Name</input>
<input class="chk" type="checkbox" checked="checked" data-index="1">Address</input>
<input class="chk" type="checkbox" checked="checked" data-index="2">Phone</input>

<table id="tbl">
<thead> 
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Phone</th>
    </tr>
</thead> 
<tbody>
    <tr>
        <td>Freddy</td>
        <td>Nightmare Street</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>Lost Street</td>
        <td>3456</td>
    </tr>
</tbody>

Javascript:

var cb = document.getElementsByClassName("chk");
var cbsz = cb.length;

for(var n = 0; n < cbsz ; ++n) {
    cb[n].onclick = function(e) {
        var idx = e.target.getAttribute("data-index");
        toggleColumn(idx);
    }
}

function toggleColumn(idx) {
    var tbl = document.getElementById("tbl");
    var rows = tbl.getElementsByTagName("tr");
    var sz = rows.length;

    for(var n = 0; n < sz; ++n) {
        var el = n == 0 ? rows[n].getElementsByTagName("th")[idx] : rows[n].getElementsByTagName("td")[idx];
        el.style.display = el.style.display === "none" ? "table-cell" : "none";
    }
}

http://jsfiddle.net/dbrecht/YqUNz/1/

I added the checkboxes as it doesn't make sense to bind the click to the column headers as you won't be able to toggle the visibility, only hide them.

Answer 3

Simulating the Google Finance show/hide columns functionality:

http://jsfiddle.net/b9chris/HvA4s/

$('#edit').click(function() {
    var headers = $('#table th').map(function() {
        var th =  $(this);
        return {
            text: th.text(),
            shown: th.css('display') != 'none'
        };
    });

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
    $.each(headers, function() {
        h.push('<th><input type=checkbox',
               (this.shown ? ' checked ' : ' '),
               '/> ',
               this.text,
               '</th>');
    });
    h.push('</tr></thead></table></div>');
    $('body').append(h.join(''));

    $('#done').click(function() {
        var showHeaders = $('#tableEditor input').map(function() { return this.checked; });
        $.each(showHeaders, function(i, show) {
            var cssIndex = i + 1;
            var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
            if (show)
                tags.show();
            else
                tags.hide();
        });

        $('#tableEditor').remove();
        return false;
    });

    return false;
});

Answer 4

The easiest way to do this would be to add a class to each td that matches the class of the header. When you click the , it checks the class, then hides every td with that class. Since only the s in that column would hide that class, it would effectively hide the column.

<table>
  <thead>
    <th>Name</th>
    <th>Address</th>
  </thead>
  <tbody>
    <tr>
       <td class="Name">Joe</td>
       <td class="Address">123 Main St.
  </tbody>
</table>

And the script something like:

$('th').click( function() {
  var col = $(this).html(); // Get the content of the <th>
  $('.'+col).hide(); // Hide everything with a class that matches the col value.
});

Something like that, anyway. That's probably more verbose than it needs to be, but it should demonstrate the principle.

Another way would be to simply count how many columns over the in question is, and then loop through each row and hide the td that is also that many columns over. For instance, if you want to hide the Address column and it is column #3 (index 2), then you would loop through each row and hide the third (index 2).

Good luck..

Answer 5

You can do something with CSS, like:

<html>
<head>
    <style>
        .c1 .c1, .c2 .c2, .c3 .c3{
            display:none;
        }
    </style>
</head>
<body>
<table class="c2 c3">
    <thead> 
        <tr>
            <th id="name" class="c1">Name</th>
            <th id="address" class="c2">Address</th>
            <th id="phone" class="c3">Phone</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td class="c1">Freddy</td>
            <td class="c2">Nightmare Street</td>
            <td class="c3">123</td>
        </tr>
        <tr>
            <td class="c1">Luis</td>
            <td class="c2">Lost Street</td>
            <td class="c3">3456</td>
        </tr>
    </tbody>
</table>
</body>
</html>

To hide a column, you add with Javascript the corresponding class to the table. Here c2 and c3 are hidden.

You could add dynamically the .c1, .c2,... in a style tag, or define a maximum number.

Answer 6

jQuery('thead td').click( function () {

    var th_index = jQuery(this).index();

    jQuery('#my_table tbody tr').each(
        function(index) {
            jQuery(this).children('td:eq(' + th_index + ');').each(
                function(index) {
                    // do stuff here
                }
            );
        }
    );
});

Answer 7

here's a working fiddle of this behaviour:

http://jsfiddle.net/tycRW/

of course, hiding the column with out hiding the header for it will have some strange results.