在該行的輸入字段中添加表格行和數據

一旦用戶在輸入字段中輸入並單擊保存...它將轉到表格行。

現在用戶再次鍵入並單擊保存...它會替換舊條目。

我要在輸入字段中添加一個新行，並在用戶類型點擊保存之前輸入新文本。

<table class="table table-bordered table1"> 
    <thead> 
     <tr class="info"> 
      <td>ID</td> 
      <td>Name</td> 
      <td>Access</td> 
      <td>Delete</td> 
      <td>Edit</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="info"> 
      <td class="mac-id">&nbsp;</td> 
      <td class="nameofUser">&nbsp;</td> 
      <td class="access">&nbsp;</td> 
      <td class="btn-delete"><a href="#" class="trash-icon">&nbsp;</a></td> 
      <td class="btn-edit"><a href="#" class="edit-icon">&nbsp;</a></td> 
     </tr> 
    </tbody> 
</table> 
</div> 
<div class="buttons"> 
    <a href="#" class="btn btn-primary btn-new">New</a> 
    <a href="#" class="btn btn-success btn-save">Save</a> 
    <a href="#" class="btn btn-warning btn-cancel">Cancel</a> 
</div> 

    </table>

jQuery的

$(".btn-save").click(function(e) { 
    var macID  = $("#mac-address").val(this); 
    var nameofUser = $("#user-name").val(this); 
    var access  = $("#access option:selected").text(this); 

    $(".table1 tr:last").after("<tr class='info'><td>&nbsp;</td><td></td><td></td><td></td><td></td></tr>"); 


});

http://jsfiddle.net/isherwood/UFCeh/

來源

2013-07-15 Mohd Imran

那麼你有什麼問題？ –

當我在輸入字段中放置一些文本，然後單擊保存...它會創建新行，但不會插入我在輸入字段中鍵入的文本。 –

您有一些HTML問題。這裏有一個小提琴與他們清理：http://jsfiddle.net/isherwood/UFCeh/1看看你是否可以添加您的表單領域，並獲得演示工作。 – isherwood

它看起來像你只需要輸入值添加到您的代碼：

$(".btn-save").click(function(e) { 
    var macID  = $("#mac-address").val(); 
    var nameofUser = $("#user-name").val(); 
    var access  = $("#access option:selected").text(); 

    $(".table1 tr:last").after("<tr class='info'><td>" + macID + 
     "</td><td>" + nameofUser + "</td><td>" + access + "</td>" + 
     "<td class='btn-delete'><a href='#' class='trash-icon'>&nbsp;</a></td>" + 
     "<td class='btn-edit'><a href='#' class='edit-icon'>&nbsp;</a></td>");  
});

Errr，其實this代碼內指向保存按鈕。所以也刪除。

來源

2013-07-15 16:06:40 Mottie

這個問題解決了。謝謝Mottie。現在編輯按鈕在最後的現在不工作。我有一個點擊這個按鈕的工作。 –

哦，你沒有分享這個代碼。嘗試使用['on（）'委託方法]（http://api.jquery.com/on/#direct-and-delegated-events）。所以它看起來像這樣：'（'。'table1'）。on（'click'，'.btn-edit'，function（）{/ * edit it * /}）''。刪除按鈕也一樣。 – Mottie

它工作。所以天才莫蒂！謝謝 –

在該行的輸入字段中添加表格行和數據

回答

相關問題