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

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

每行只使用不同的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 2

使它成为跨度而不是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 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>

<强>演示：

可以在此处找到这方面的工作演示。