Question

我正在尝试在HTML中创建一个2x2的表格网格，其中每个表格都是可独立折叠的。我似乎无法找到一个合适的解决方案。例如，下面的版本有些工作，但不幸的是，当隐藏R1C1表时，第2行表与第一行连接。

<!DOCTYPE html>
<!-- Attempt at a 2x2 grid of tables, each independently collapsible
Based on following web pages (among others):
- http://www.delphifaq.com/faq/javascript/f1030.shtml
- http://www.w3schools.com/css/css_table.asp
-->
<html>
  <head>
    <title>2x2 table grid</title>

    <style>
      table, th, td
      {
      border-collapse:collapse;
      border:1px solid black;
      width=50%
      }
    </style>


    <script language="JavaScript" type="text/javascript">
    function setDivStyle(table, style) {
        // Set the display style
            var tbl = document.getElementById(table);
            tbl.style.display = style;
        console.log(table + " display style set to " + style)
          }
    </script> 

  </head>

  <body>

    <div id="r1">
      <h2>Row 1</h2>

      <div id="r1-controls">
    <a id="r1c1-hide" href="javascript:setDivStyle('r1c1', 'none')">Hide R1C1</a> 
    &nbsp;
    <a id="r1c2-show" href="javascript:setDivStyle('r1c1', 'inline')">Expand R1C1</a>
    &nbsp;
    <a id="r1c2-hide" href="javascript:setDivStyle('r1c2', 'none')">Hide R1C2</a> 
    &nbsp;
    <a id="r1c2-show" href="javascript:setDivStyle('r1c2', 'inline')">Expand R1C2</a>
    <br>
      </div>

      <table id="r1c1" style="display: inline; float: left">
    <tr>
      <th>R1C1a</th>
      <th>R1C1b</th>
      <th>R1C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>

      <table id="r1c2" style="display: block; float: none">
    <tr>
      <th>R1C2a</th>
      <th>R1C2b</th>
      <th>R1C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>
    </div>

    <div id="r2">
      <h2>Row 2</h2>

      <div id="r2-controls">
    <a id="r2c1-hide" href="javascript:setDivStyle('r2c1', 'none')">Hide R2C1</a> 
    &nbsp;
    <a id="r2c1-show" href="javascript:setDivStyle('r2c1', 'inline')">Expand R2C1</a>
    &nbsp;
    <a id="r2c2-hide" href="javascript:setDivStyle('r2c2', 'none')">Hide R2C2</a> 
    &nbsp;
    <a id="r2c2-show" href="javascript:setDivStyle('r2c2', 'inline')">Expand R2C2</a>
    <br>
      </div>

      <table id="r2c1" style="display: inline; float: left">
    <tr>
      <th>R2C1a</th>
      <th>R2C1b</th>
      <th>R2C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>

      <table id="r2c2" style="display: block; float: none">
    <tr>
      <th>R2C2a</th>
      <th>R2C2b</th>
      <th>R2C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>
    </div>


  </body>
</html>

Answer 1

我之前遇到过类似的问题。当隐藏R1C2时，float:left导致第2行向上移动。我建议创建另一个函数，当您隐藏R1C2时将切换float:left：

function setFloat(element, style) {
    var el = document.getElementById(element);
    el .style.float = style;
    console.log(element + " float style set to " + style)
}

并调用它：javascript:setDivStyle('r1c2', 'none');setFloat('r1c1','none');

如何在HTML中创建2x2表格网格

1 个答案: