Jquery 表显示/隐藏列
我有一张典型的桌子 7列,每次分页为100行 我想做的是列出所有列,根据名称是各自的,然后我想挂接到select onchange事件,当发生更改时隐藏所有未选中的列,对于每个隐藏的列,将列的colspan减少1 表格结构为:Jquery 表显示/隐藏列,jquery,html-table,Jquery,Html Table,我有一张典型的桌子 7列,每次分页为100行 我想做的是列出所有列,根据名称是各自的,然后我想挂接到select onchange事件,当发生更改时隐藏所有未选中的列,对于每个隐藏的列,将列的colspan减少1 表格结构为: <table> <thead> <tr> <th>first</th> <th>second</th> <th>third</th>
<table>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
<th>fourth</th>
<th>fifth</th>
<th>sixth</th>
<th>seventh</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7"></td>
</tr>
</tfoot>
</table>
我怀疑结尾的选择会是这样的:
<select multiple="multiple">
<option value="1" selected="selected">first</option>
<option value="2" selected="selected">second</option>
<option value="3" selected="selected">third</option>
<option value="4" selected="selected">fourth</option>
<option value="5" selected="selected">fifth</option>
<option value="6" selected="selected">sixth</option>
<option value="7" selected="selected">seventh</option>
</select>
下面是一个工作示例: 下面是有关如何执行此操作的代码摘要:
<table class="editable_table">
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
<th>fourth</th>
<th>fifth</th>
<th>sixth</th>
<th>seventh</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="footer" colspan="7">This is the footer</td>
</tr>
</tfoot>
</table>
<select multiple="multiple">
<option value="1" selected="selected">first</option>
<option value="2" selected="selected">second</option>
<option value="3" selected="selected">third</option>
<option value="4" selected="selected">fourth</option>
<option value="5" selected="selected">fifth</option>
<option value="6" selected="selected">sixth</option>
<option value="7" selected="selected">seventh</option>
</select>
还有javascript:
function hideCol($table, myIndex){
$table.find("tr").each(function(){
$(this).find("th:eq("+myIndex+"), td:eq("+myIndex+")").not('.footer').hide();
});
}
function showCol($table, myIndex){
$table.find("tr").each(function(){
$(this).find("th:eq("+myIndex+"), td:eq("+myIndex+")").not('.footer').show();
});
}
$("select").change(function(){
var $table = $(".editable_table"),
cols = $(this).val();
for (var i = 1; i <= $table.find("th").length; i++){
if (cols.indexOf(i+'') === -1) {
hideCol($table, i-1);
} else {
showCol($table, i-1);
}
}
$table.find("tfoot td").attr('colspan', cols.length);
});
因为你的问题很模糊,我想这就是你想要的。在任何情况下,它都应该做到这一点
PS可能不是最有效的方法——但是考虑到提高效率,就像读者所说的那样,对读者来说是一个练习。
< P>这里我是如何做到这一点的, jQuery:// setup re-usable variables
var $myGrid = $('#myGrid'),
$colFilter = $('#columnFilter'),
optionElementTemplate = "<option value=\"{0}\">{0}</option>";
// iterate the <th> tags to build the multi-select box
$('th', $myGrid).each(function() {
// create a jquery object to append from the optionElementTemplate and the <th> text
$colFilter.append($(optionElementTemplate.replace(/\{0\}/g, $(this).text())));
});
$colFilter.change(function() {
// store count for footer
var count = 0;
// show all columns
resetTable();
// iterate over the select options for selected values
$('option', this).each(function() {
if(!$(this).attr("selected")) {
count++;
hideColumn($(this).index());
}
});
// adjust the colspan
adjustFooter($('option', this).length - count);
});
function resetTable() {
$('#myGrid td, #myGrid th').show();
$('#myGrid tfoot td').attr("colspan", $('#columnFilter option').length);
}
function hideColumn(index) {
$('#myGrid thead th:eq(' + index + ')').hide();
$('#myGrid tbody td:eq(' + index + ')').hide();
}
function adjustFooter(count) {
$('#myGrid tfoot td').attr("colspan", count);
}
在将其投入生产之前,可能会进行一些微调,但功能是存在的
注意边缘条件,例如取消选择所有选项
$(document).ready(function(){
$(".table-column-selector").change(function(){
var selectedCols = $(this).val();
var cols = $("table.tableClass thead th").length;
var footer = $("table.tableClass tfoot tr td");
footer.attr("colspan", selectedCols.length);
for (col = cols - 1 ; col >= 0 ; col--) {
var columns = $("table.tableClass tbody tr td:nth-child(" + (col + 1) + ")");
var headers = $("table.tableClass thead tr th:nth-child(" + (col + 1) + ")");
if ($.inArray( col + 1 + "", selectedCols ) != -1) {
columns.show();
headers.show();
}
else {
columns.hide();
headers.hide();
}
}
})
});
请参阅colspan的答案