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 の表示が "none" から "inline" (私は "block" も試しました) に切り替わります。この例では、#2 のスタイルをテーブルの周りの DIV に設定し、#3 のスタイルをテーブルの周りの TD に設定しています。どちらの方法も 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 を使用しても、まだ table-Element を保持できます。これを試してください：http://jqueryui.com/tabs/ 問題の解決に役立つはずです

于 2013-07-17T13:59:28.963 に答える