創建動態表格

到目前爲止，我已經避免了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>

我想利用這個表，只保留所示（名稱，質量，狀況）前三輸入類型。如果你點擊「詳細信息」鏈接或按鈕，其餘的會打開。所以表格會展開（或者理想的情況下，因爲這個表格太長，會進入下一行）。該詳細信息按鈕或鏈接將不得不打開和關閉。任何想法，將不勝感激。

來源

2011-11-02 Tom

您不能在表格內和表格外（數據或標題）單元格中有表單。錯誤恢復瀏覽器**之間的差異會導致破壞。 – Quentin

不知道我知道你的意思嗎？ – Tom

您的'

'環繞''元素，但也在''內。將表單標籤移動到'

'元素之外。 @Quentin說不同的瀏覽器會以不同的方式處理，所以不要指望它能在所有瀏覽器中運行。 – Blender

回答

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

，所以它不會弄亂你的佈局：

另外，您可以使用此功能。

來源

2011-11-02 16:31:40 Robb

'language ='折舊。使用'type =「text/javascript」' – Blender

這在很大程度上起作用，但無論我如何玩弄它，表格都會變得混亂。我會繼續努力... – Tom

它不應該搞亂佈局太多，如果你使用：

對不起，格式不好。 – Robb

對於動畫，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(); 
    } 
    }); 
});

來源

2011-11-02 16:12:30 Blender

哇，看起來很簡單。我完全避免了javascript（和jquery），但也許我應該重新考慮這一點。 – Tom

你還有什麼動畫呢？您將不得不使用客戶端腳本，並且JavaScript是人們使用的每個瀏覽器（普通）都支持的唯一語言。 – Blender

我能希望嗎？是的，我知道JavaScript將成爲其中的一部分，我的意思是我直到現在纔回避它。我需要重新思考的是jquery。我在我的Joomla網站上遇到了很多jquery問題......到目前爲止，我已經離開了。 – Tom

相關問題