创建动态表格

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(); 
    } 
    }); 
}); 

Answer 3

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