JQuery Datatables添加新行

我創建了一個註冊頁面，其中有人可以註冊多達20個其他人，如果他們想。所以，我有這些文本框：JQuery Datatables添加新行

First Name: <br/><input type="text" name="fname" id="fname" /> <br/> 
Last Name: <br/><input type="text" name="lname" id="lname" /> <br/> 
Email: <br/><input type="text" name="email" id="email"/> <br/>

這是我的HTML表格與數據表的我的JQuery intialization：

<div id="tables"> 
    <table id="table" border="1"> 
     <thead> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email</th> 
      </tr> 
     </thead> 
    </table> 
</div> 

$('#reg_more').dataTable({ 
    "bLengthChange": false, 
    "bInfo": false 
});

現在我想提出一個附加按鈕，以便用戶可以輸入第一和姓氏和電子郵件，然後點擊添加，它會被放入表格中。我如何去做這件事？

來源

2012-09-16 Richard

谷歌搜索您的具體問題的意願。快速告訴你。https://www.google.com/search?q=JQuery+Datatables+Add+new+Row&rlz=1C1CHFX_enUS480US480&aq=f&sugexp=chrome,mod=8&sourceid=chrome&ie=UTF-8 –

@StephenSarcsamKamenar呀，這正是我在發佈之前就已經做過了，但我無法迴應這些問題，甚至嘗試了一些解決方案，但都沒有成功，這就是我來到這裏的原因，所以有人可以解釋我能理解的解決方案。選項 – Richard

http://datatables.net/examples/api/add_row.html不起作用？你有什麼麻煩？ –

$(document).ready(function() { 
    $('#example').dataTable(); 
    $('#addbtn').click(addrow); 
}); 

function addrow() { 
    $('#example').dataTable().fnAddData([ 
     $('#fname').val(), 
     $('#lname').val(), 
     $('#email').val() ]); 

}

您需要在按鈕單擊中調用addrow（）。

在HTML代碼中

<input type="button" value="add" id="addbtn" />

來源

2012-09-16 03:56:30 Sutha

ahh好多了，我是jquery和datatables的全新品牌，所以我很難做這種事情。但是這更有意義。所以我可以做同樣的事情進行編輯和刪除。還有1件事，我如何正確發佈所有這些數據，以便我可以將它添加到MySQL數據庫？假設他們註冊自己和20個其他人，我需要添加21個條目到我的mysql數據庫。要註冊 – Richard

，可以使用jQuery ajax將數據插入到數據庫中。 – Sutha

下面是這個現在在數據表1.10

<input type="button" value="add" id="addbtn" /> 

var dTable = $('#example').DataTable(); 
$('#addbtn').on('click', function() { 
    dTable.row.add([ 
     $('#fname').val(), 
     $('#lname').val(), 
     $('#email').val() 
    ]).draw(); 
});

來源

2014-05-05 15:43:28 Shoe

完成這也可能是有用的，但並不總是在時間的方式添加該按鈕。我自己調試過，即使你有更多的數據，也不會花費太多時間。

var table = $(".tableclassName")["1"] 
var tableClone = $(".tableclassName")["3"] 
$(yournewrowtext).insertAfter(table.children["1"].children[currentRowId]); 
$(yourfirstcolumn).insertAfter(tableClone.children["1"]. 
children[currentRowId]);

注意：如果你不使用固定的列，那麼你可以刪除此行 $（yourfirstcolumn）.insertAfter（tableClone.children [ 「1」]

來源

2017-05-24 10:05:04 Eliotjse

JQuery Datatables添加新行

回答

相關問題