如何从表头（th）中获取相应的表列（td）？
我想得到表头的整个列。
例如，我想选择表头“Address”来隐藏地址列，并选择“Phone”标题来显示对应列。
Name Address Address Freddy Nightmare Street 123 Luis Lost Street 3456
我想做一些像http://www.google.com/finance?q=apl （参见相关公司表） （点击“添加或删除列”链接）
像这样的东西会起作用 –
$('th').click(function() { var index = $(this).index()+1; $('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide() });
如果单击标题，上面的代码将隐藏相关列，但逻辑可以根据您的要求进行更改。
通过对HTML的几个简单修改，我会做类似以下的事情（无框架JS）：
HTML：
Name Address Phone Name Address Phone Freddy Nightmare Street 123 Luis Lost Street 3456
使用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/
我添加了复选框，因为将点击绑定到列标题没有意义，因为您无法切换可见性，只能隐藏它们。
您可以使用CSS执行某些操作，例如：
Name Address Phone Freddy Nightmare Street 123 Luis Lost Street 3456
要隐藏列，可以使用Javascript将相应的类添加到表中。 这里隐藏了c2和c3。
您可以在样式标记中动态添加.c1，.c2，…，或定义最大数字。
最简单的方法是向每个匹配标题类的td添加一个类。 单击时，它会检查类，然后将每个td隐藏在该类中。 由于只有该列中的s会隐藏该类，因此它会有效地隐藏该列。
Name Address Joe 123 Main St.
和脚本类似：
$('th').click( function() { var col = $(this).html(); // Get the content of the $('.'+col).hide(); // Hide everything with a class that matches the col value. });
无论如何，这样的事情。 这可能比它需要的更冗长，但它应该certificate原理。
另一种方法是简单地计算有问题的列数，然后遍历每一行并隐藏也是那么多列的td。 例如，如果要隐藏“地址”列并且它是列＃3（索引2），那么您将遍历每一行并隐藏第三行（索引2）。
祝好运..
模拟Google财经显示/隐藏列function：
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 = ['']; $.each(headers, function() { h.push(' ', this.text, ' '); }); h.push('
'); $('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 } ); } ); });