Add/Remove input fields dynamically using jquery in HTML for table

by Lalita 17-May-19

0 474


It's easy to add or remove sections in Div. But adding and removing fields for table is little bit different and typical. You can easily do it with the help of below given code:

<table class="table no-margin">
<tbody>
<tr>
<td> <select name="gender[]" class="form-control" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select> </td>
<td> <select class="form-control" name="state[]">
<option value="All">Select State</option>
</select></td>

<td><input type="text" name="category_price[]" class="form-control" placeholder="Category Price" required></td>
</tr>
</tbody>

<!-- Here in the tbody "add_content" class is used to show the add more field -->

<!-- Notice here that to call/ show the add more fields the class is added to "tbody tag".
Here tbody tag works to call whole section in it so that it will not effect the UI.

<!-- Start tbody -->

<tbody class="add_content"> </tbody>

<!-- End tbody -->
<tbody>
<tr>
<td colspan="3" align="center">
<button type="button" id="addButton" class="btn btn-primary btn-sm" name="add" style="font-size:11px;" onclick="addContent(3)">Add More</button>

<!-- Here 3 is the maximum limit to add the number of sections -->

<button type="button" id="removeButton" class="btn btn-danger btn-sm" name="remove" style="font-size:11px;" onclick="removeButton()">Remove Field</button>
</td>
</tr>
</tbody>
</table>

<!-- The below script you can call in footer or also at bottom of your page -->
<script type="text/javascript">

function addContent(uplimit){
// If you want to set the limit for adding fields you can use the below code
// If you don't want to set limit, then use can remove or comment the below "If" condition
if( ($('.form .control-group').length+1) > uplimit-1) {
alert("You can add maximum 3 .");
return false;
}
// Below is the code to add the section for table
// starting of add fields
// Always remember that there should not be extra space when you write the code in a variable for script

var id = ($('.add_content .control-group').length + 0).toString();
var ans_opt = $('.add_content .control-group').length+1;
$('.add_content').append('<tr class="control-group" id="control-group' + id + '"><td><select name="gender[]" class="form-control" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td><select class="form-control" name="state[]">
<option value="All">Select State</option>
</select></td>
<td><input type="text" name="category_price[]" class="form-control" placeholder="Category Price" required></td></tr>');

};

//ending of add fields
//starting for remove fields

$(document).ready(function () {
$("#removeButton").click(function () {
if ($('.add_content .control-group').length == 0) {
alert("No more textbox to remove");
return false;
}
$(".add_content .control-group:last").remove();
});
});

// ending for remove fields code
</script>

Related Blog: Add/Remove input fields dynamically using jquery in HTML for Div


Share:


Comments

    Waiting for your comments

Leave a Reply