隐藏表格列使用jQuery

我想隐藏表的列表与jQuery，但我不知道如何做到这一点。我有一个下拉列每个列，并有两个选项，隐藏和显示，隐藏我想列0隐藏使用.hide()函数我假设，也显示当选择显示？隐藏表格列使用jQuery

2011-12-27 Iain Simpson

是下拉菜单为列本身内部的显示/隐藏？你能告诉我们你使用的代码吗？ – Beejamin 2011-12-27 23:32:35

:nth-child伪选择器根据它们的位置选择元素。如果要选择第5列，则可以使用$("td:nth-child(5)")。

实现可能看起来像：

$("#mytable td:nth-child(5)").hide(); //or .hide(), or .toggle()

来源

2011-12-27 23:28:54

嗨，谢谢你的回复，如果我把这个放在表演动作上，这个也会解开这个专栏吗？谢谢:-) – 2011-12-27 23:31:36

如果你用'show'替换'hide'，列会显示出来。 *额外*：如果您用'toggle'替换'hide'，则列会显示它们是否隐藏，并在可见时隐藏; – 2011-12-27 23:32:57

实际上这只会隐藏整个表中的第五个td，而不是每行中的第五个td。不知道'$（“＃mytable tr td：nth-child（5）”）'是否会起作用，或者你需要在'tr'上使用'each（）'。 – Purag 2011-12-27 23:35:16

var $col_select = $('#col-select'), 
    $opt_select = $('#opt-select'), 
    $my_table = $('table'); 
$col_select.add($opt_select).on('change', function() { 
    var col_val = $col_select.children(':selected').val(), 
     opt_val = $opt_select.children(':selected').val(); 
    if (col_val !== '' && opt_val !== '') { 
     $my_table.find('td:nth-child(' + col_val + ')').css('display', opt_val); 
    } 
});

这里是一个演示：http://jsfiddle.net/RjXpq/2/

来源

2011-12-27 23:32:02 Jasper

该循环不是非常有效。 1）'col_select'的值在执行过程中不会修改。所以，最好缓存这个值。 2）'：nth-child'也可以直接用在'td'选择器上，这样就不需要'.each（）'。 – 2011-12-27 23:35:04

@RobW对循环的好的调用，这里是'不是很高效'的定义：http://jsperf.com/jquery-each-tr-vs-td-selector（答案已更新） – Jasper 2011-12-27 23:43:48

Fiddle和Perf的+1 ;） – 2011-12-27 23:44:49

隐藏表格列使用jQuery

回答

相关问题