创建动态表单

Question

到目前为止，我一直避免使用javascript，主要是因为我是个新手。但我想我再也不能避免了？

我在一个表格中有一个简单的表单，我用php处理。

<table id="my-table">
    <thead>
    <tr>
        <td>Name</td>
        <td>Quality</td>
        <td>Status</td>
        <td>User</td>
        <td>Password</td>
        <td>IP</td>
        <td>Port</td>
        <td>Options</td>
    </tr>
    </thead>

    <form action="<?php htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">
    <tbody>
        <tr>
            <td>
            <input type="text" size="18" maxlength="32" name="add_name" value="Enter name" />
            </td>
            <td>
            <select name="add_quality">
                <option value='HIGH' selected='selected'>High</option>
                <option value='MEDIUM'>Medium</option>
                <option value='MOBILE'>Mobile</option>
            </select>
            </td>
            <td>
            <select name="add_status">
                <option value='ENABLED' selected='selected'>Enabled</option>
                <option value='DISABLED'>Disabled</option>
            </select>
            </td>
            <td>
                <input type="text" size="14" maxlength="16" name="add_user" value="Enter username" />
            </td>
            <td>
                <input type="password" size="12" maxlength="16" name="add_pass" />
            </td>
            <td>
                <input type="text" size="10" maxlength="16" name="add_ip" value="Enter IP" />
            </td>
            <td>
                <input type="text" size="12" maxlength="6" name="add_port" value="Enter Port #" />
            </td>
            <td>
                <input type="submit" name="add" value="Add" />
            </td>
            </tr>
    </tbody>
    </form>
</table>

我想使用这个表，并且只保留显示的前三个输入类型(名称、质量、状态)。如果你点击一个“详细信息”链接或按钮，剩下的就会打开。因此，该表将展开(或者理想情况下转到下一行，因为该表太长)。该详细信息按钮或链接必须切换为打开和关闭。任何想法都将不胜感激。

Answer 1

基本的javascript方法：

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

然后放置带有以下内容的按钮或链接：

<input type="button" value="Details" onClick="toggle_visibility('detailsWrapper')">

最后，只需在您想要隐藏的字段周围创建一个div或一个新的tr，将id设置为"detailsWrapper“，并使用display:none设置样式。

或者，您可以使用此函数：

        function toggle_visibility(id) {
           var control = document.getElementById(controlId);
           if(control.style.visibility == "visible" || control.style.visibility == "")
              control.style.visibility = "hidden";
           else 
              control.style.visibility = "visible";
        }

如果我没记错的话，这将保留显示元素所需的空间，这样就不会弄乱你的布局。

Answer 2

在动画方面，jQuery是我最喜欢的JavaScript库。这让事情变得容易多了。

下面的代码可能适用于您：

$('#my-table tr td').each(function(i) {
  if (i >= 3) {
    $(this).hide();
  }
});

$('#details').click(function() {
  $('#my-table tr td').each(function(i) {
    if (i >= 3) {
      $(this).slideToggle();
    }
  });
});