Q

添加TR按钮

2016-02-12 260 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

相关问题