javascript - add tr immediately after the button

Solution:

You can use jQueryAfter(); jquery.com/after/ and a click event, and make sure the input name is an array[]

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

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

Solution:

jQuery can do this for you using.append() - jquery.com/append

An untested example...

Here is the HTML,

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

and the javascript,

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

Solution:

You will need some JavaScript(JQuery) to accomplish your task.

Live Preview: http://codepen.io/larryjoelane/pen/Nxovdj

Place the following in a script tag before your closing body tag or load it from an external file after you load JQuery. If you are unsure how to load JavaScript through an external file you can download the example from this link and explore the index.html file.

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);


});
Copy code