我已经搜索了几个小时,但是找不到像我这样有隐藏/显示实例的表格 - 我已经尝试使用标准隐藏/显示标准HTML表格,但它没有转换到我需要的工作。
我在JS中创建了一个从json加载数据的表,如下所示:
var output = "<table class = sample>",
tableHeadings = "<thead>" +
//set column names
"<tr>" +
"<th></th>" +
"<th><u>Name:</u></th>" +
"<th><u>Address:</u></th>" +
"<th><u>City:</u></th>" +
"<th><u>State:</u></th>" +
"<th><u>Phone Number:</u></th>" +
"<th><u>PO:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"</tr>" +
"</thead>";
output += tableHeadings;
output += "<td>"+'<a href="#" onclick="javascript:displayInfobox(' + (i) + ');">' + results[i]["Business Name"] +'<\/a>' + "</td>" +
"<td>" + results[i]["Address"] + "</td>" +
"<td><center>" + results[i]["City"] + "</center></td>" +
"<td><center>" + results[i]["StateListing"] + "</center></td>";
document.getElementById("placeholder").innerHTML = output;
我要做的是使用地址栏的按钮/复选框隐藏/显示。我尝试在jquery中使用style.display和.hide / .show。我尝试的所有内容都会隐藏第一个条目,但在此之后仍会显示每个条目的地址。
我需要能够隐藏所有显示条目的命令的地址信息。
答案 0 :(得分:3)
您可以使用子选择器:
$("td:nth-child(2)").hide()
或者在地址td中添加一个类,然后选择所有c类:
<td class='c'>
$(".c").hide()
答案 1 :(得分:1)
您可以做的是在创建表格时为每个td应用一个类。在隐藏特定列时,您可以根据类名选择元素并隐藏它。
Here's is the fiddle, with an example
// Using Javascript
function hideAddress()
{
var elems = document.getElementsByClassName("addr");
for(var i = 0; i<elems.length; i++) {
elems[i].style.display = "none";
}
}
// Using Jquery
$("#hideAddr").click(function() {
$(".addr").hide();
});
希望它有所帮助!
答案 2 :(得分:0)
据我所知,你想隐藏/显示列,但我不是百分百肯定。下一个代码隐藏并显示表格上的列:
<html>
<head>
<title>Show-Hide</title>
<script type="text/javascript">
function hide ( column ) {
var tbl = document.getElementById( "tbl" );
var i;
for ( i = 0; i < tbl.rows.length; i++ )
tbl.rows[ i ].cells[ column ].style.visibility = "hidden";
}
function restore () {
var tbl = document.getElementById( "tbl" );
var i;
var j;
for ( i = 0; i < tbl.rows.length; i++ )
for ( j = 0; j < tbl.rows[ i ].cells.length; j++ )
tbl.rows[ i ].cells[ j ].style.visibility = "visible";
}
</script>
</head>
<body>
<table id="tbl">
<tr>
<td><button onclick="hide(0)">Hide</button></td>
<td><button onclick="hide(1)">Hide</button></td>
<td><button onclick="hide(2)">Hide</button></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
<td>999</td>
</tr>
</table>
<br/>
<button onclick="restore();">Restore columns</button>
</body>
</html>
创建一个文本文件,根据需要为其命名,但使用扩展名HTML,复制并粘贴以前的代码,然后在浏览器中打开它。如果它不是你想要的,我们可以解决它。
如果要完全消失列,而不是
tbl.rows[ i ].cells[ column ].style.visibility = "hidden"; // or "visible".
使用
tbl.rows[ i ].cells[ column ].style.display = "none"; // or "table-cell".
答案 3 :(得分:0)
这是一个有效的示例。我只使用JQuery来创建表,但该函数应该在没有它的情况下工作。
http://plnkr.co/edit/MWlXNRhAAzDjPPf42a19?p=info
$(function() {
var results = [];
results.push({
'Business Name': 'Bus1',
'Address': 1234,
'City': 'test',
'StateListing': 'CA'
});
results.push({
'Business Name': 'Bus2',
'Address': 5678,
'City': 'test',
'StateListing': 'CA'
});
results.push({
'Business Name': 'Bus3',
'Address': 9120,
'City': 'test',
'StateListing': 'CA'
});
function setupTable() {
var output = "<table class = sample>",
tableHeadings = "<thead>" +
//set column names
"<tr>" +
"<th><u>Name:</u></th>" +
"<th name='addressCol'><u>Address:</u></th>" +
"<th><u>City:</u></th>" +
"<th><u>State:</u></th>" +
"<th><u>Phone Number:</u></th>" +
"<th><u>PO:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"</tr>" +
"</thead>";
output += tableHeadings;
for (var i = 0; i < results.length; i++) {
output += "<tr><td>" + '<a href="#" onclick="javascript:displayInfobox(' + (i) + ');">' + results[i]["Business Name"] + '<\/a>' + "</td>" +
"<td name='addressCol'>" + results[i]["Address"] + "</td>" +
"<td><center>" + results[i]["City"] + "</center></td>" +
"<td><center>" + results[i]["StateListing"] + "</center></td></tr>";
}
document.getElementById("placeholder").innerHTML = output;
}
setupTable();
});
function hideFunction() {
var items = document.getElementsByName('addressCol');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
}