[英]show / hide table columns using jQuery
我有一張有五列的表
column1 column2 column3 column4 column5
------- ------- ------- ------- -------
當第一個復選框被選中時,我每個列都有一些復選框,然后我需要顯示第一列,如果未選中,我需要隱藏第一列。 像我需要為所有列做的那樣。
我找到了一些答案,但沒有找到任何解決方案。第一次它隱藏然后其他操作不起作用。
$('#tableId td:nth-child(column number)').hide();
請幫助我。在此先感謝....
在這里,完整的解決方案:
並在這里更新: http : //jsfiddle.net/vXBtP/5/
<table>
<thead>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
</thead>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</tbody>
</table>
$(document).on('change', 'table thead input', function() {
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('table tbody tr td').eq(index).show();
} else {
$('table tbody tr td').eq(index).hide();
}
});
根據您要隱藏的列#,使用此被盜的一個班輪:
$('td:nth-child(2)').hide();
如果你使用th
$('td:nth-child(2),th:nth-child(2)').hide();
如果我明白你的意思,你可以使用tr th, tr td
和nth-child
選擇器使它變得非常簡單。 您可以根據索引進行操作,但是您需要添加1,因為nth-child
不像jQuery中的元素那樣被索引。 JS並不一定要被抽出來。 我應該提一下,在td:nth
之前放置tr
是非常重要的,因為你不想要“只有第n個td”。 如果是這樣的話,你不會在每一行都隱藏每一個col。
僅供參考:如果你想要一些“更干凈”的東西,(比如在turbotax網站上) 不要隱藏td本身。 而是使它比最大的文本稍寬,並將每段文本放在每個單元格內的p
或div
標簽內。 然后更改column
選擇器以獲取每個單元格的內部元素並隱藏它。
<table>
<thead>
<tr>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
</tbody>
</table>
<button>Reset</button>
$(function() {
// Selects your table by id, then the input checkboxes inside the table, you can
// alternate this call with classnames on your inputs if you're going to have
// more inputs than what's desired in call here.
// also note i'm using the "change" function and not "click", this simply
// provides easier control of what's going on with your inputs and makes
// later calls (like reset) a much easier call. Less thinking required
$("#tableId input[type=checkbox]").on("change", function(e) {
// First variable grabs the inputs PARENT index, this is the TH containing
// the input, thus the column you want hidden.
// The second is calling ALL TH's && TD's having that same index number
var id = $(this).parent().index()+1,
col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
// This simple inline "if" statement checks if the input is checked or now
// and shows the columns based on if it IS checked
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML
$("button").on("click", function(e) {
$("input[type=checkbox]").prop("checked", true).change();
});
})
您可以獲取表的標題索引並使表標題和td元素隱藏。 像這樣的東西
假設表頭的索引是index = 2;
var index= tableHeaderIndex; // 2 here
$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();
喜歡這個?
很快就在一起,但應該工作。
<table id="TabToHide">
<tr>
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
<td class="Col4">Col 4</td>
<td class="Col5">Col 5</td>
</tr>
<tr>
<td class="Col1">Stuff 1</td>
<td class="Col2">Stuff 2</td>
<td class="Col3">Stuff 3</td>
<td class="Col4">Stuff 4</td>
<td class="Col5">Stuff 5</td>
</tr>
</table>
<br />
<table>
<tr>
<td><input name="Col1" type="checkbox" checked="checked" /></td>
<td><input name="Col2" type="checkbox" checked="checked" /></td>
<td><input name="Col3" type="checkbox" checked="checked" /></td>
<td><input name="Col4" type="checkbox" checked="checked" /></td>
<td><input name="Col5" type="checkbox" checked="checked" /></td>
</tr>
</table>
使用Javascript
$('input:checkbox').change(function(){
var ColToHide = $(this).attr("name");
if(this.checked){
$("td[class='" + ColToHide + "']").show();
}else{
$("td[class='" + ColToHide + "']").hide();
}
$('div#Debug').text("hiding " + ColToHide);
});
$(document).ready(function(){
$('table tr input:checkbox').change(function(){
var num = $(this).parents("th").index();
alert(num);
if($(this).is(":checked"))
{
$('table tbody tr td').eq(num).show();
}else
{
$('table tbody tr td').eq(num).hide();
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show and Hide Columns in a Table</title>
<link href="CSS/table.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function () {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle();
});
});
</script>
</head>
<body>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column</p>
<div id="grpChkBox">
<p><input type="checkbox" name="empid" /> Employee ID</p>
<p><input type="checkbox" name="fname" /> First Name</p>
<p><input type="checkbox" name="lname" /> Last Name</p>
<p><input type="checkbox" name="email" /> Email</p>
<p><input type="checkbox" name="phone" /> Phone</p>
</div>
<table id="someTable">
<thead>
<tr>
<th class="empid">EmpId</th>
<th class="fname">First Name</th>
<th class="lname">Last Name</th>
<th class="email">Email</th>
<th class="phone">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="empid">E342</td>
<td class="fname">Bill</td>
<td class="lname">Evans</td>
<td class="email">Bill@devcurry.com</td>
<td class="phone">234-2345-2345</td>
</tr>
<tr>
<td class="empid">E343</td>
<td class="fname">Laura</td>
<td class="lname">Matt</td>
<td class="email">laura@devcurry.com</td>
<td class="phone">123-1234-5678</td>
</tr>
<tr>
<td class="empid">E344</td>
<td class="fname">Ram</td>
<td class="lname">Kumar</td>
<td class="email">ram@devcurry.com</td>
<td class="phone">345-3456-7890</td>
</tr>
</tbody>
</table>
</body>
</html>
您可以在“th”元素上添加“id”,然后簡單地調用: $('#yourId').hide();
這是我使用的代碼:
$(document).on('click', '.form-check-input', function(e){
var finition_checked = $('#finition_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
var size_checked = $('#size_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
if (finition_checked && size_checked.length === 0){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_size').hide();
};
if (finition_checked.length === 0 && size_checked){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_finition').hide();
};
if(size_checked && finition_checked){
$('#price-container').hide();
$('.table-responsive').show();
}
if(size_checked.length === 0 && finition_checked.length === 0){
$('#price-container').show();
$('.table-responsive').hide();
};
console.log(finition_checked, size_checked)
var unique_value = [];
var finition = [];
var size = [];
//more logic to come
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.