Javascript 中的表 - 隐藏/显示列

Table in Javascript - hide/show columns

本文关键字：显示 隐藏 Javascript      更新时间：2023-09-26

我已经搜索了几个小时，但找不到像我这样创建的表，其中有隐藏/显示实例 - 我尝试对标准 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。我尝试的所有内容都将隐藏第一个条目，但仍然显示之后每个条目的地址。

我需要能够隐藏所有显示条目的命令地址信息。

您可以使用子选择器：

$("td:nth-child(2)").hide()

或者在您的地址 td 中添加一个类，然后选择所有 c 类：

<td class='c'>
$(".c").hide()

您可以做的是在创建表时为每个 td 应用一个类。在隐藏特定列时，您可以根据类名选择元素并将其隐藏。

这是小提琴，举个例子

 // 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();
 });

希望对您有所帮助！

这是一个工作的示例。我使用 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';
  }
}

据我了解，您想隐藏/显示列，但我不是 100% 确定。接下来的代码隐藏并显示表上的列：

<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".
相关文章：