切换表格单元格内的数据显示

Question

我有一个由普通 PHP 循环生成的表。我想要做的是在每行的第一列中创建一个表单，默认情况下它是隐藏的，但是当您单击该行中的切换链接时会出现。

我可以通过创建一个名为 hidden 的 CSS id 并设置 display: none; 来制作一个普通的可切换 div。不幸的是，我无法继续使用 id=hidden 创建与前面的链接自动关联的 div。

我对 Javascript 和 CSS 都非常缺乏经验，所以我主要尝试通过将示例拼凑在一起来做到这一点，但我的结果是空的。我在某些地方读到过你不能将 div 放在表格中，所以也许我做错了。

这是代码的作用以及我希望它如何工作的示例，但当然不是。

<script language="JavaScript" type="text/javascript">
    function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        }
</script>


<?php

while($array = mysql_fetch_array($sql))
    {
?>
<tr>
    <td>
<?php
        echo $array['some_data'];
?>
        <a href="#" onclick="toggle('hidden');">Toggle</a>
        <div id="hidden"><?php echo $array['hidden_thing']; ?></div>
    </td>
    <td>
        <?php echo $array['some_other_data']; ?>
    </td>
</tr>
<?php
    }
?>

Answer 1

将其设为跨度而不是 DIV，因为我认为某些浏览器不支持表格元素内的 div。此外，不要通过 ID 引用它，而是将 this.nextSibling() 传递给切换开关，使用 DOM 导航来获取下一个兄弟（应该是 SPAN）来显示/隐藏。

  function toggle(ctl) {
      var state = ctl.style.display;
      if (state == 'block') {
          document.getElementById(id).style.display = 'none';
      } else {
          document.getElementById(id).style.display = 'block';
      }
  }


  <a href="#" onclick="toggle(this.nextSibling);">Toggle
  </a><div><?php echo $array['hidden_thing']; ?></div>

编辑：正如@tomhaigh 建议的那样（并且如示例中所示），要使其正常工作，您需要确保锚点和 div 之间没有文本/空白。您还可以编写一个函数，给定一个 DOM 元素，选择下一个非文本 DOM 元素并返回它。然后将this 传递给该函数并将结果传递给您的切换函数。

Answer 2

只需为每一行使用不同的 ID：

<?php
$count = 0;
while($array = mysql_fetch_array($sql)) {
  $id = 'hidden' . $count++;
  $data = $array['some_data'];
  $hidden = $array['hidden_thing'];
  $other_data = $array['other_data'];
  echo <<<END
<tr>
  <td>$data <a href="#" onclick="toggle('$id');>Toggle</a>
    <div id="$id">$hidden_thing</div>
  </td>
  <td>$other_data</td>
</tr>

END;
}

Answer 3

这是我推荐的（通用解决方案）使用jQuery 来相对引用事件，而不是维护每行和表单的 ID。这还允许您轻松隐藏非活动的行表单，这是一个好主意，因为一次只能提交一个表单。

HTML：

<table id="tableForms" class="table">
  <tr>
    <td class="rowForm"><form><span>form1 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form2 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form3 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
</table>

Javascript：

<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript">
//as soon as the DOM is ready, run this function to manipulate it
$(function() {
    // get all tr elements in the table 'tableForms' and bind a 
    // function to their click event
    $('#tableForms').find('tr').bind('click',function(e){
        // get all of this row's sibblings and hide their forms.
        $(this).siblings().not(this).find('td.rowForm form').hide();

        // now show the current row's form
        $(this).find('td.rowForm form').show();
    }).
    // now that the click event is bound, hide all of the forms in this table
    find('td.rowForm form').hide();
});
</script>

演示：

可以在here.找到这个工作演示