All geek questions in one place

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

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

For example, I want to select the heading of the Address table to hide the address column, and select the heading Phone to display the corresponding 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 table of related companies) (click the "add or remove columns" link)

+6
source share
7 answers

Something like this will work -

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

The above code will hide the corresponding column, if you click on the header, the logic can be changed according to your requirements.

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

+2
source

With a few simple changes to your HTML, I would do something like the following (no JS framework):

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 checkboxes, since it does not make sense to associate a click with the column headings, since you cannot switch the visibility, just hide them.

+1
source

The easiest way to do this is to add a class to each td that corresponds to the header class. When you click the button, it checks the class and then hides every td with that class. Since only s in this column will hide this class, it will 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 is 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. This is probably more verbose than it should be, but it should demonstrate the principle.

Another way would be to simply calculate how many columns are above the question, and then scroll through each row and hide td, as well as that many columns. For example, if you want to hide the "Address" column, and this is column number 3 (index 2), then you will scroll through each row and hide the third (index 2).

Good luck ..

0
source

You can do something with CSS, for example:

 <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 the column, you add the appropriate class to the table with Javascript. Here c2 and c3 are hidden.

You can dynamically add .c1, .c2, ... tags in a style tag or define a maximum number.

0
source

Mimicking the function of showing / hiding columns of Google Finance:

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; });
0
source 
 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 } ); } ); });
-1
source

the fiddle of this behavior works here:

http://jsfiddle.net/tycRW/

of course, hiding the column, hiding the heading, there will be some strange results for it.

-1
source

Source: https://habr.com/ru/post/901561/

More articles:


All Articles