試圖動態地將行添加到表中

我想爲我的web應用程序的用戶提供一種方式，以便能夠動態地將更多的姓氏字段添加到需要填寫爲表單的表單中創建窗口小部件類型頁面的一部分。試圖動態地將行添加到表中

問題

代碼工作的，因爲它創建了一個新的集/姓田的，但它附加在錯誤的地方......它把它在表單的頂部，而不是在第一組名字/姓氏字段下。

代碼：

這是HTML表格的樣子：

<table class="table table-bordered table-hover">  
<tr><td colspan="3"><input class="form-control" type="input" placeholder="Location" name="location" /></td></tr> 
<tr><td colspan="3"><input class="form-control" type="input" placeholder="Department" name="department" /></td></tr> 
<div id='listofnames'> 
     <tr> 
      <td><input class="form-control" type="input" placeholder="First Name" name="fname" /></td> 
      <td><input class="form-control" type="input" placeholder="Last Name" name="Lname" /></td> 
      <td><button id='addname' type="button" class="btn btn-info btn-circle"><i class="fa fa-plus"></i></button></td>         
     </tr> 
</div> 
<tr><td colspan="3"><input type="submit" name="submit" class="btn btn-primary" value="Assign" /></td></tr> 
</table>

的你看到的是我的企圖孤立，我要添加新行的區域。

當用戶點擊「addname」按鈕，我有以下代碼執行：

$("#addname").click(function() { 

    htmlstring ="<tr>"; 
    htmlstring += "<td><input class='form-control' type='input' placeholder='First Name' name='fname' /></td>"; 
    htmlstring += "<td><input class='form-control' type='input' placeholder='Last Name' name='lname' /></td>"; 
    htmlstring += "</tr>"; 
    $("#listofnames").append(htmlstring); 

});

你能告訴我什麼，我做錯了什麼？

EDIT 1

使用.before()方法我改變這樣的：

$("#listofnames").append(htmlstring);

這樣：

$("#assign").before(htmlstring);

其中「分配」現在是按鈕觸發器的id這一切。得到了該建議.after()

來源

2016-11-07 Happydevdays

'div'不是一張桌子，你不應該在裏面有'tr'元素......你應該仔細檢查你的結構。 – Dekel

一個最小的表格應該如下所示：

並且您應該在tbody內部添加tr。 – progysm

我只顯示部分表格...我不'顯示

標籤，但它在那裏。我現在將添加它。 – Happydevdays

回答

答案我認爲你正在尋找這樣的想法：

$("#addname").click(function() { 
 

 
    htmlstring = "<tr>"; 
 
    htmlstring += "<td><input class='form-control' type='input' placeholder='First Name' name='fname' /></td>"; 
 
    htmlstring += "<td><input class='form-control' type='input' placeholder='Last Name' name='lname' /></td>"; 
 
    htmlstring += "</tr>"; 
 
    $("#listofnames").after(htmlstring); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td colspan="3"> 
 
     <input class="form-control" type="input" placeholder="Location" name="location" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3"> 
 
     <input class="form-control" type="input" placeholder="Department" name="department" /> 
 
    </td> 
 
    </tr> 
 
    <tr id='listofnames'> 
 
     <td> 
 
     <input class="form-control" type="input" placeholder="First Name" name="fname" /> 
 
     </td> 
 
     <td> 
 
     <input class="form-control" type="input" placeholder="Last Name" name="Lname" /> 
 
     </td> 
 
     <td> 
 
     <button id='addname' type="button" class="btn btn-info btn-circle">append</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3"> 
 
     <input type="submit" name="submit" class="btn btn-primary" value="Assign" /> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-11-07 21:20:38 Nimmi

很酷。到目前爲止，這是最接近實際工作的。唯一的問題是當你多次點擊添加按鈕。新行總是添加在列表底部的相同位置。我不確定這是否是一場表演賽......不得不考慮這個問題。 – Happydevdays

如果我做相反的事情呢？如果有一個.before（）方法可以調用，我將在按鈕之前添加。 – Happydevdays

賓果！這樣可行。發佈代碼。 – Happydevdays

-1

嘗試改變

$("#listofnames").append(htmlstring);

爲

$("#listofnames").html(htmlstring);

來源

2016-11-07 21:18:32

我相信html（）只是替換已經存在的整個html。所以這不會工作 – Happydevdays

試試這個：

$（this）.before（htmlstring）;

來源

2016-11-07 21:29:52 hoanewton

相關問題