如何填充表格？

我有一張空表，我想根據在同一頁面上輸入的數據填充。如何填充表格？

例子。用戶輸入名稱，出生日期。點擊添加。名稱和DOB列的表格有+1行。並且可以根據用戶的選擇多次添加。

<table width= "100%"> 
     <tr> 
      <th colspan="3">Owners Already Added</th> 
     </tr> 
     <tr> 
      <td>(NAME)</td> 
      <td>(DOB)</td> 
     </tr> 
</table> 


<table id="Owner"> 
     <tr> 
      <th colspan="2">Owner</th> 
     </tr> 
     <tr> 
      <td>Name</td> 
      <td><input id="txtName" type="text" /></td> 
     </tr> 
     <tr> 
      <td>Address</td> 
      <td><input id="txtDOB" type="text" /></td> 
     </tr> 
</table>

來源

2010-03-02 MrM

是否要將數據存儲在任何存儲中？你可以提出要求，因爲否則它就沒有多大意義。 – LukLed 2010-03-02 18:42:52

只是爲了完成基思·盧梭的答案（添加的代碼添加新行）：

<table id="displayTable"> 
    <tr> 
     <td>Name</td> 
     <td>Date of birth</td> 
    </tr> 
</table> 
<table id="Owner"> 
    <tr> 
     <th colspan="2"> 
      Owner 
     </th> 
    </tr> 
    <tr> 
     <td> 
      Name 
     </td> 
     <td> 
      <input id="txtName" type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Date of birth 
     </td> 
     <td> 
      <input id="txtDOB" type="text" /> 
     </td> 
    </tr> 
</table> 
<button onclick="addNewRow();">Add</button> 

<script type="text/javascript"> 
    function addNewRow() { 
     $('#displayTable tr:last').after('<tr><td class="name"></td><td class="dob"></td></tr>'); 
     var $tr = $('#displayTable tr:last'); 
     $tr.find('.name').text($('#txtName').val()); 
     $tr.find('.dob').text($('#txtDOB').val()); 
    } 
</script>

來源

2010-03-02 18:55:12 LukLed

在第一個表格中，添加一個「DisplayTable」的ID並將您的列分別更改爲具有class =「name」和class =「dob」。

了jQuery做，這是如下：

var $tr = $('#DisplayTable tr:last'); 
$tr.find('.name').text($('#txtName').val()); 
$tr.find('.dob').text($('#txtDOB').val());

來源

2010-03-02 18:33:31

該代碼不會將行添加到表中。 – LukLed 2010-03-02 18:39:40

這就是我想要做的。這個答案有點不對，還是應該繼續看看我能做些什麼？ – MrM 2010-03-02 18:45:40

你是對的 - 代碼不會添加新行。我假設我們已經有了我們想要編輯的那一行。 – 2010-03-02 19:03:09

JQuery的可能是在這裏你的朋友。看到這個question，因爲它類似於你正在做的事情。

您可能還需要向服務器發送帖子以保存您的數據。見 jQuery post求救

來源

2010-03-02 18:35:52 Rippo

算了，既然是jQuery和各種各樣的表格，你可能會考慮一個插件 - 比如我們已經成功使用的jqGrid。

在這裏看到的鏈接：jqGrid

他們有例子做你形容無論是在網上的表，或者在一個模態對話框，很多在這裏的選項。

來源

2010-03-02 19:08:54

如何填充表格？

回答

相關問題