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

对于动画，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();
    }
  });
});

Answer 2

基本的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";
        }

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

创建动态表单

2 个答案: