1

我正在开发一个快速而肮脏的应用程序，该应用程序涉及在外部表中水平显示的几个单列表。

|-------------------------------------------|
|             outer table                   |
|-------------------------------------------|
|    ---------    ---------    ---------    |
|    | table 1|   |table 2|    |table 3|    |
|    ---------    ---------    ---------    |
|    | row 1  |   | row 1 |    | row 1 |    |
|    ---------    ---------    ---------    |
|    ...                                    |
|    ---------    ---------    ---------    |
|    | row n  |   | row n |    | row n |    |
|    ---------    ---------    ---------    |
|                                           |
|-------------------------------------------|

        ---------    ---------    
        |SHOW #2|    |SHOW #3|
        ---------    ---------

我意识到这可以使用没有表格的 css 来完成，但是我不够熟练，这不需要很优雅。开始时，仅显示第一个表。单击按钮将显示从“无”切换到“内联”（我也尝试过“块”）#2 和#3。在此示例中，我在桌子周围的 DIV 中设置了#2 的样式，在桌子周围的 TD 中设置了#3 的样式。这两种方法都适用于 Firefox 22.0，但不适用于 Chrome 27.0 或 Safari 5.0（都在 Mac 上）。有没有使用表格的解决方案？或者，如果您想设计样式表，也可以：-)

<html>
<body>

<table id = "main" border=0 cellspacing=20>

    <tr>
        <td>
            <table id = "tbl1" border=0> 
                <tr><td> table #1, row #1 </td></tr>
                <tr><td> table #1, row #2 </td></tr>
            </table>
        </td>

        <td>
            <!-- Hide the table with a hidden DIV -->

            <div id = "tbl2" style="display:none">
              <table border=0>
                <tr><td> table #2, row #1 </td></tr>
                <tr><td> table #2, row #2 </td></tr>
            </table>
           </div>
       </td>

       <!-- Hide the table with a hidden TD -->

       <td id = "tbl3" style="display:none">
          <table border=0>
            <tr><td> table #3, row #1 </td></tr>
            <tr><td> table #3, row #2 </td></tr>
        </table>
      </td>
   </tr>
</table> 

<br>

<input type=button value ='show table #2' onclick='document.getElementById("tbl2").style="display:inline"'>
<input type=button value ='show table #3' onclick='document.getElementById("tbl3").style="display:inline"'>
<br>
<br>
<input type=button value ='hide table #2' onclick='document.getElementById("tbl2").style="display:none"'>
<input type=button value ='hide table #3' onclick='document.getElementById("tbl3").style="display:none"'>

</body>
</html>
4

2 回答 2

1

这是一个工作示例。在制作时，我不知道您不想使用 jQuery，但我强烈建议您改变主意，因为您所要做的就是将其添加到您的 html 中，最好是在结束</body>标记之前：

<script src="http://code.jquery.com/jquery-1.7.2.min.js">
$(document).ready(function () {
  $('input').on("click", function () {
      var inputValue = $(this).val();
      var index = inputValue.indexOf("#")
      var divId = "#tbl" + inputValue.substr(index+1);
      $(divId).toggle();
  }); 
});
</script>

我还稍微更改了 html：我在每个表中使用 1 个输入：“显示或隐藏”在 1 个按钮中。但是您当然可以使用 2 个按钮：只需更改 jQuery 并相应地调用 hide() 或 show()。如果您真的不想使用 jQuery，您可以将我的示例转换为纯 JavaScript，但这似乎需要您编写更多代码 :)

于 2013-07-17T14:54:22.790 回答
0

您可以在此处使用 TABS 并且仍然拥有您的表格元素。试试这个： http: //jqueryui.com/tabs/ 它应该可以帮助你解决你的问题

于 2013-07-17T13:59:28.963 回答