Question

我有一个小例子，我想根据用户的选择隐藏/显示单选按钮。但是，出于某种原因，colspan属性无法正常工作。

  style.
    .hide {
      display: none;
      font-size: 13px;
      font-weight: bold;
    }
  body
    table(align='center', 8px='', cellpadding="10", border=1)
      tr
        th
          input(type='radio', name='tab', value='red', onclick='red();')
          | Red
        th
          input(type='radio', name='tab', value='blue', onclick='blue();')
          | Blue
      tr
        td#color.hide(colspan='2')
           input(type='radio', value='light', name='one')
           | light red
           input(type='radio', value='dark', name='two')
           | dark red
       tr
         td(colspan='2')
         p test

  script.
    function red() {
      document.getElementById('color').style.display = 'block';
    }
    function blue() {
      document.getElementById('color').style.display = 'none';
    }

我想要的是浅红色和深红色的弹出式选择，以跨越两列，例如最后一个 test 条目。表。我有和html相同的例子

<!DOCTYPE html>
<html>
<head>
 <style>
    .hide {
      display: none;
      font-size: 13px;
      font-weight: bold;
    }
  </style>
</head>
  <body>
    <table align="center" 8px="" cellpadding="10" border="1">
      <tr>
        <th>
          <input type="radio" name="tab" value="red" onclick="red();">Red
        </th>
      <th>
        <input type="radio" name="tab" value="blue" onclick="blue();">Blue
      </th>
      <tr>
        <td id="color" colspan="2" class="hide">
          <input type="radio" value="light" name="one">light red
          <input type="radio" value="dark" name="two">dark red
        </td>
      </tr>
      <tr>
        <td colspan="2">
        <p>test</p>
        </td>
      </tr>
    </table>
  </body>
  <script>
    function red() {
      document.getElementById('color').style.display = 'block';
    }
    function blue() {
      document.getElementById('color').style.display = 'none';
    }
  </script>
</html>

Answer 1

您接近了，您只需要将javascript代码更改为

document.getElementById('color').style.display = 'table-cell'

这将使<td>显示为表格单元格，而不是

document.getElementById('color').style.display = 'block';

尝试将<td>显示为任何其他HTML标记这解决了您的问题。

另一个答案建议使用table-row，如果您使用<tr>进行显示/隐藏，则可以正确使用，在这种情况下，您使用的是<td>，这是一个单元格，因此table-cell属性是合适的。

与<table>相关的标签具有不同的显示属性，您可以从here获取有关显示属性的信息。

function red() {
  document.getElementById('color').style.display = 'table-cell';
}

function blue() {
  document.getElementById('color').style.display = 'none';
}

.hide {
  display: none;
  font-size: 13px;
  font-weight: bold;
}

<table align="center" 8px="" cellpadding="10" border="1">
  <tr>
    <th>
      <input type="radio" name="tab" value="red" onclick="red();">Red
    </th>
    <th>
      <input type="radio" name="tab" value="blue" onclick="blue();">Blue
    </th>
  </tr>
  <tr>
    <td colspan="2" id="color" class="hide">
      <span><input type="radio" value="light" name="one">light red</span>
      <span><input type="radio" value="dark" name="two">dark red</span>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <p>test</p>
    </td>
  </tr>
</table>

Answer 2

结帐： https://bugzilla.mozilla.org/show_bug.cgi?id=112113

通常tr会显示：table-row;。显然，布局不   如果将其显示为：block ;，则保持不变。（如果它在IE中“有效”，则IE   是错误的。）

标记无效。

因此，通常它具有表行，如果更改，它将被阻塞。使得表格无法控制。

<!DOCTYPE html>
<html>
<head>
 <style>
    .hide {
      display: none;
      font-size: 13px;
      font-weight: bold;
    }
  </style>
</head>
  <body>
    <table align="center" 8px="" cellpadding="10" border="1">
      <tr>
        <th>
          <input type="radio" name="tab" value="red" onclick="red();">Red
        </th>
      <th>
        <input type="radio" name="tab" value="blue" onclick="blue();">Blue
      </th>
      <tr>
        <td id="color" colspan="2" class="hide">
          <input type="radio" value="light" name="one">light red
          <input type="radio" value="dark" name="two">dark red
        </td>
      </tr>
      <tr>
        <td colspan="2">
        <p>test</p>
        </td>
      </tr>
    </table>
  </body>
  <script>
    function red() {
      document.getElementById('color').style.display = 'table-row';
    }
    function blue() {
      document.getElementById('color').style.display = 'none';
    }
  </script>
</html>

属于一个类的表单元格的HTML跨度

2 个答案: