javascript - How can I get the corresponding table column (td) from a table header (th)?

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 (see the related panies table) (click the "add or remove columns" link)

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./finance?q=apl (see the related panies table) (click the "add or remove columns" link)

Share Improve this question edited Jul 24, 2013 at 16:19 RobEarl 7,9126 gold badges37 silver badges52 bronze badges asked Nov 15, 2011 at 20:44 panchicore 12k13 gold badges76 silver badges101 bronze badges

3 isn't this thread: stackoverflow./questions/2132034/jquery-select-column about the same issue? – JMax Commented Nov 15, 2011 at 20:48
i take it the 3rd column is the "Phone" column? – Patricia Commented Nov 15, 2011 at 20:50
For coloring/shading a column instead of adding/removing it: stackoverflow./questions/15651408/… – Chris Moschini Commented Mar 27, 2013 at 4:13

Add a ment |

7 Answers 7

Sorted by: Reset to default 2

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/LUDWQ/

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/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.

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.

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..

Simulating the Google Finance show/hide columns functionality:

http://jsfiddle/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;
});

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
                }
            );
        }
    );
});

here's a working fiddle of this behaviour:

http://jsfiddle/tycRW/

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I get the corresponding table column (td) from a table header (th)? - Stack Overflow

7 Answers 7

与本文相关的文章

评论列表(0)