1

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

我可以通过创建一个名为 hidden 和 setting 的 CSS id 来制作一个普通的可切换 div display: none;。不幸的是,我无法继续创建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
    }
?>
4

3 回答 3

3

只需为每一行使用不同的 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;
}
于 2009-01-09T11:22:34.413 回答
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给该函数并将结果传递给您的切换函数。

于 2009-01-09T11:20:11.687 回答
1

这是我推荐的(通用解决方案)使用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>

演示:

可以在这里找到一个工作演示。

于 2009-01-09T19:11:03.353 回答