Fatal编程技术网
  • javascript/
  • Javascript中的表-隐藏/显示列

Javascript中的表-隐藏/显示列

javascript

Javascript中的表-隐藏/显示列,javascript,html-table,show-hide,Javascript,Html Table,Show Hide,我已经搜索了几个小时，但没有找到像我这样创建的表，其中有隐藏/显示实例-我尝试使用一些标准的隐藏/显示标准HTML表，但它不能转换为我需要的工作 我在JS中创建了一个表，该表从json加载数据，如下所示： var output = "<table class = sample>", tableHeadings = "<thead>" + //set column names "<tr>" + "<th></th>" + "<t

我已经搜索了几个小时，但没有找到像我这样创建的表，其中有隐藏/显示实例-我尝试使用一些标准的隐藏/显示标准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:nth-child(2)").hide()
或者在地址td中添加一个类，然后选择所有c类：

<td class='c'>
$(".c").hide()
据我所知，您希望隐藏/显示列，但我不是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>
使用

据我所知，您希望隐藏/显示列，但我不是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>
使用

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

希望有帮助

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

希望有帮助

这是一个有效的示例。我使用JQuery只是为了创建表，但是如果没有它，函数应该可以工作

下面是一个有效的示例。我使用JQuery只是为了创建表，但是如果没有它，函数应该可以工作

我喜欢你做这件事的方式，但是你做的桌子——它对我的桌子不起作用。谢谢。我喜欢你这样做的方式，但是你的桌子不适合我的桌子。不过谢谢。这个功能很好用，不过它没有“显示”功能。我可以想出来，这一部分是很容易与工作'隐藏'。我感谢你的帮助！我最终复制了名为showFunction的函数，并添加了类似document.getElementByID'button'.style.display=none/block的内容来显示/隐藏链接到每个文件的每个按钮。对我所需要的足够好了。再次感谢您的帮助。它工作得很好，但没有“显示”功能。我可以想出来，这一部分是很容易与工作'隐藏'。我感谢你的帮助！我最终复制了名为showFunction的函数，并添加了类似document.getElementByID'button'.style.display=none/block的内容来显示/隐藏链接到每个文件的每个按钮。对我所需要的足够好了。再次感谢您的帮助jquery非常棒。然而，它不能以我需要->的方式工作，而且我无法启动jquery。谢谢你的帮助！jquery非常棒。然而，它不能以我需要->的方式工作，而且我无法启动jquery。谢谢你的帮助！ 
$(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';
  }
}