Q

添加TR按鈕

2016-02-12 116 views 0 likes

0

我希望讓用戶立即添加其他輸入文件旁邊按下按鈕後，立即讓他可以選擇和發送文件的「X」號添加TR按鈕

我一直使用這些答案同時，沒有運氣搜索

http://stackoverflow.com/a/19200323/5586647 
http://stackoverflow.com/a/19200278/5586647 
http://stackoverflow.com/a/30098596/5586647

我的代碼塊，我想插入新潮流是

echo '<tr align=center ><td colspan="4"><input type="file" name="oc" id="oc"/></td><td><input type="button" value="add more" id="addme"/></td></tr>';

我會aprecciate有點幫助

編輯：

在使用的答案我有，增加了一個問題去TR（或我猜是TR），但原來的一側（使用追加）

和我要的是：

CODE：https://jsfiddle.net/9k4kmvmw/

2016-02-12 Rhopercy

+0

你能給我們沒有所有的PHP代碼的HTML？在您的開發機器上加載您的頁面，右鍵單擊表格並單擊檢查或檢查元素。找到開頭的'

'標籤，並右鍵點擊它，你應該能夠找到一個選項來複制html。 –

A

回答

0

您可以使用jQuery After();jquery.com/after/和點擊事件，並確保輸入名稱是[]數組

$('.addme').click(function(){ 
    $('.uploads').last('tr').after('<tr align=center ><td colspan="4"><input type="file" name="oc[]"/></td></tr>'); 
});

http://jsfiddle.net/j0jjzm7o/16/

2016-02-13 00:08:24 nodws

+0

請檢查編輯 – Rhopercy

0

jQuery的你可以使用.append()做到這一點的 - jquery.com/append

一個未經考驗的例子...

這裏是HTML，

<table id="table"> 
    <tr> 
    <td><input type="file" name="file[]" /></td> 
    </tr> 
</table> 
<button id="button">Add another</button>

和JavaScript，

$("#button").click(function(){ 
    var string = '<tr><td><input type="file" name="file[]" /></td></tr>'; 
    $("#table").append(string); 
});

2016-02-13 00:04:03 Steve

+0

請檢查編輯 – Rhopercy

0

你需要一些JavaScript（JQuery的）來完成你的任務。

實時預覽：http://codepen.io/larryjoelane/pen/Nxovdj

放置在一個腳本標籤下面的結束標記之前或加載後的JQuery從外部文件加載它。如果您不確定如何通過外部文件加載JavaScript，則可以從此鏈接下載示例並瀏覽index.html文件。

Example Download

//store the addme id 
var addMe = "#addme"; 

//store the tr markup 
var tr = '<tr align=center ><td colspan="4"><input type="file" name="oc" id="oc"/></td><td><input type="button" value="add more" id="addme" /></td></tr>'; 

//add the on click event 
$(document).on("click",addme,function(){ 


    //select the table 
    var table = $("#table"); 

    //append the tr 
    table.append(tr); 


});

2016-02-13 00:30:07

+0

請檢查編輯 – Rhopercy

+0

請發佈您的完整表格html，包括我可以在我的現場示例中測試的開始和結束標記以嘗試解決問題。 –

+0

https://jsfiddle.net/9k4kmvmw/ – Rhopercy

相關問題