选择复选框时显示和隐藏数据表中的列 [英] show and hide columns in Datatable upon checkbox selection
本文介绍了选择复选框时显示和隐藏数据表中的列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目前我正在研究数据表.在这里，我试图根据复选框选择显示和隐藏表格列.对于普通的 html 表，我知道如何使用 jquery 启用此服务.但同样不适用于 Datatable.有人可以建议我怎么做吗?
$(document).ready(function(){var table = $('#mine').DataTable();$('#mine tfoot th').each( function () {var title = $(this).text();$(this).html('<input type="text" placeholder="Search '+title+'"/>' );});$('#myInput').keyup( function() {table.draw();});$('input.column_filter').on('keyup click', function () {filterColumn( $(this).parents('tr').attr('data-column') );});<table border="0" cellpadding="5" cellspacing="5" ><tbody><tr><td>ade:</td><td><input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="搜索名字.." title="输入名字"></td></tr><tr id="filter_col2" data-column="1"><td>列-2</td><td align="center"><input class="column_filter" id="col1_filter" type="text"></td></tr><tr><td><input type="checkbox" class="toggleColumn" name="a" value="3"/>第四个</td></tr><tr id="filter_col3" data-column="2"><td>栏 - 办公室</td><td align="center"><input class="column_filter" id="col2_filter" type="text"></td></tr></tbody></table><table id="mine" class="display" width="100%" cellspacing="0"><头><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th><th class="a">a</th></thead><脚><tr><th>a</th><th>位置</th><th>办公室</th><th>年龄</th><th>开始日期</th><th class="a" name="a">Salary</th></tr></tfoot><tr><td>saf</td><td>saf</td><td>saf</td><td>saf</td><td>saf</td><td class="a" name="a">saf</td></tr><tr><td>a</td><td>q</td><td>saf</td><td>b</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>q</td><td>b</td><td>saf</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>q</td><td>b</td><td>b</td><td>saf</td><td class="a" name="a">c</td></tr><tr><td>saf</td><td>saf</td><td>a</td><td>b</td><td>c</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>c</td><td>a</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>saf</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">saf</td></tr><tr><td>a</td><td>saf</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>saf</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>saf</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>rauf</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>rauf</td><td>saf</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>saf</td><td>rauf</td><td>c</td><td>b</td><td class="a">c</td></tr></tbody>试过:$(函数(){$.fn.bootstrapSwitch.defaults.onColor = '成功';$.fn.bootstrapSwitch.defaults.offColor = '危险';$.fn.bootstrapSwitch.defaults.size = 'mini';$.fn.bootstrapSwitch.defaults.state = 'false';$.fn.bootstrapSwitch.defaults.inverse = 'true';$(".toggle-vis").bootstrapSwitch();var table = $('#mine').DataTable();$('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {event.preventDefault();var column = table.column(~~$(this).attr('data-column'));column.visible(!column.visible());}); 解决方案 更新:要使用分页按钮仍然隐藏所有列，请参阅此
试试这个例子
$(document).ready(function(){var table = $('#mine').DataTable();$("#hide_show_all").on("change",function(){var hide = $(this).is(":checked");$(".hide_show").prop("checked", hide);如果(隐藏){$('#mine tr th').hide(100);$('#mine tr td').hide(100);}别的{$('#mine tr th').show(100);$('#mine tr td').show(100);}});$(".hide_show").on("change",function(){var hide = $(this).is(":checked");var all_ch = $(".hide_show:checked").length == $(".hide_show").length;$("#hide_show_all").prop("checked", all_ch);var ti = $(this).index(".hide_show");$('#mine tr').each(function(){如果(隐藏){$('td:eq(' + ti + ')',this).hide(100);$('th:eq(' + ti + ')',this).hide(100);}别的{$('td:eq(' + ti + ')',this).show(100);$('th:eq(' + ti + ')',this).show(100);}});});$('#mine tfoot th').each( function () {var title = $(this).text();$(this).html('<input type="text" placeholder="Search '+title+'"/>' );});$('#myInput').keyup( function() {table.draw();});$('input.column_filter').on('keyup click', function () {filterColumn( $(this).parents('tr').attr('data-column') );});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/><script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script><table border="0" cellpadding="5" cellspacing="5"><tr><td>ade:</td><td><input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="搜索名字.." title="输入名字"></td></tr><tr id="filter_col2" data-column="1"><td>列-2</td><td align="center"><input class="column_filter" id="col1_filter" type="text"></td></tr><tr id="filter_col3" data-column="2"><td>栏 - 办公室</td><td align="center"><input class="column_filter" id="col2_filter" type="text"></td></tr></tbody><!--控制显示隐藏列(开始)--><div id='control_sh'><input type="checkbox" class="hide_show"><span>隐藏一个</span><input type="checkbox" class="hide_show"><span>隐藏b</span><input type="checkbox" class="hide_show"><span>隐藏c</span><input type="checkbox" class="hide_show"><span>隐藏d</span><input type="checkbox" class="hide_show"><span>隐藏e</span><input type="checkbox" class="hide_show"><span>隐藏 f</span><input type="checkbox" id="hide_show_all"><span>隐藏所有</span><!--control show hide columns ( end ) --><table id="mine" class="display" width="100%" cellspacing="0"><头><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th class="a">f</th></thead><脚><tr><th>a</th><th>位置</th><th>办公室</th><th>年龄</th><th>开始日期</th><th class="a" name="a">Salary</th></tr></tfoot>
<tr><td>saf</td><td>saf</td><td>saf</td><td>saf</td><td>saf</td><td class="a" name="a">saf</td></tr><tr><td>a</td><td>q</td><td>saf</td><td>b</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>q</td><td>b</td><td>saf</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>q</td><td>b</td><td>b</td><td>saf</td><td class="a" name="a">c</td></tr><tr><td>saf</td><td>saf</td><td>a</td><td>b</td><td>c</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>c</td><td>a</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a" name="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>saf</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">saf</td></tr><tr><td>a</td><td>saf</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>saf</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>saf</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>b</td><td>a</td><td>b</td><td>c</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>rauf</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>a</td><td>b</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>rauf</td><td>saf</td><td>c</td><td>b</td><td class="a">c</td></tr><tr><td>a</td><td>saf</td><td>rauf</td><td>c</td><td>b</td><td class="a">c</td></tr></tbody></table>Currently I am working on Datatable. Here I'm trying to show and hide table column based on checkbox selection. For normal html table I know how to enable this service using jquery. But the same not working for Datatable. Can any one please suggest me how could i do this?
$(document).ready(function(){
var table = $('#mine').DataTable();
$('#mine tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
$('#myInput').keyup( function() {
table.draw();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
<table border="0" cellpadding="5" cellspacing="5" >
<tbody><tr>
<td>ade:</td><td>
<input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</td></tr>
<tr id="filter_col2" data-column="1">
<td>Column - 2</td>
<td align="center"><input class="column_filter" id="col1_filter" type="text"></td>
</tr>
<tr><td><input type="checkbox" class="toggleColumn" name="a" value="3" /> fourth</td></tr>
<tr id="filter_col3" data-column="2">
<td>Column - Office</td>
<td align="center"><input class="column_filter" id="col2_filter" type="text"></td>
</tr>
</tbody></table>
<table id="mine" class="display" width="100%" cellspacing="0">
<thead>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
<th class="a">a</th>
</thead>
<tfoot>
<tr>
<th>a</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th class="a" name="a">Salary</th>
</tr>
</tfoot>
<tbody>
<tr><td>saf</td>
<td>saf</td>
<td>saf</td>
<td>saf</td>
<td>saf</td>
<td class="a" name="a">saf</td></tr>
<tr><td>a</td>
<td>q</td>
<td>saf</td>
<td>b</td>
<td>b</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>q</td>
<td>b</td>
<td>saf</td>
<td>b</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>q</td>
<td>b</td>
<td>b</td>
<td>saf</td>
<td class="a" name="a">c</td></tr>
<tr><td>saf</td>
<td>saf</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>c</td>
<td>a</td>
<td>b</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a" name="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>saf</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">saf</td></tr>
<tr><td>a</td>
<td>saf</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>saf</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>saf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>rauf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>rauf</td>
<td>saf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
<tr><td>a</td>
<td>saf</td>
<td>rauf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td></tr>
</tbody>
</table>
tried:
$(function(){
$.fn.bootstrapSwitch.defaults.onColor = 'success';
$.fn.bootstrapSwitch.defaults.offColor = 'danger';
$.fn.bootstrapSwitch.defaults.size = 'mini';
$.fn.bootstrapSwitch.defaults.state = 'false';
$.fn.bootstrapSwitch.defaults.inverse = 'true';
$(".toggle-vis").bootstrapSwitch();
var table = $('#mine').DataTable();
$('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {
event.preventDefault();
var column = table.column(~~$(this).attr('data-column'));
column.visible( ! column.visible() );
});
解决方案 Update: To make all columns still hidden with pagination buttons see this
Try this example
$(document).ready(function(){
var table = $('#mine').DataTable();
$("#hide_show_all").on("change",function(){
var hide = $(this).is(":checked");
$(".hide_show").prop("checked", hide);
if(hide){
$('#mine tr th').hide(100);
$('#mine tr td').hide(100);
}else{
$('#mine tr th').show(100);
$('#mine tr td').show(100);
}
});
$(".hide_show").on("change",function(){
var hide = $(this).is(":checked");
var all_ch = $(".hide_show:checked").length == $(".hide_show").length;
$("#hide_show_all").prop("checked", all_ch);
var ti = $(this).index(".hide_show");
$('#mine tr').each(function(){
if(hide){
$('td:eq(' + ti + ')',this).hide(100);
$('th:eq(' + ti + ')',this).hide(100);
}else{
$('td:eq(' + ti + ')',this).show(100);
$('th:eq(' + ti + ')',this).show(100);
}
});
});
$('#mine tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
$('#myInput').keyup( function() {
table.draw();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td>ade:</td>
<td>
<input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</td>
</tr>
<tr id="filter_col2" data-column="1">
<td>Column - 2</td>
<td align="center">
<input class="column_filter" id="col1_filter" type="text">
</td>
</tr>
<tr id="filter_col3" data-column="2">
<td>Column - Office</td>
<td align="center">
<input class="column_filter" id="col2_filter" type="text">
</td>
</tr>
</tbody>
</table>
<!--control show hide columns ( start )-->
<div id='control_sh'>
<input type="checkbox" class="hide_show"><span>Hide a</span>
<input type="checkbox" class="hide_show"><span>Hide b</span>
<input type="checkbox" class="hide_show"><span>Hide c</span>
<input type="checkbox" class="hide_show"><span>Hide d</span>
<input type="checkbox" class="hide_show"><span>Hide e</span>
<input type="checkbox" class="hide_show"><span>Hide f</span>
<input type="checkbox" id="hide_show_all"><span>Hide All</span>
</div>
<!--control show hide columns ( end ) -->
<table id="mine" class="display" width="100%" cellspacing="0">
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th class="a">f</th>
</thead>
<tfoot>
<tr>
<th>a</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th class="a" name="a">Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>saf</td>
<td>saf</td>
<td>saf</td>
<td>saf</td>
<td>saf</td>
<td class="a" name="a">saf</td>
</tr>
<tr>
<td>a</td>
<td>q</td>
<td>saf</td>
<td>b</td>
<td>b</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>q</td>
<td>b</td>
<td>saf</td>
<td>b</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>q</td>
<td>b</td>
<td>b</td>
<td>saf</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>saf</td>
<td>saf</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>a</td>
<td>b</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a" name="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>saf</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">saf</td>
</tr>
<tr>
<td>a</td>
<td>saf</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>saf</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>saf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>rauf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>rauf</td>
<td>saf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
<tr>
<td>a</td>
<td>saf</td>
<td>rauf</td>
<td>c</td>
<td>b</td>
<td class="a">c</td>
</tr>
</tbody>
</table>
这篇关于选择复选框时显示和隐藏数据表中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆