Add html tag dynamically in html
<script src="jquery-2.1.1.js" language="javascript" type="application/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ID = 1;
function addRow() {
var html = '<tr>' +
'<td>Name: <input type="text" name="aa' + ID + '" /></td>' +
'<td>File: <input type="file" name="fileUpload' + ID + '" /></td>' +
'<td><input type="button" class="BtnPlus" value="+" /></td>' +
'<td><input type="button" class="BtnMinus" value="-" /></td>' +
'</tr>'
$(html).appendTo($("#Table1"))
ID++;
};
$("#Table1").on("click", ".BtnPlus", addRow);
function deleteRow() {
if(ID==1) return;
var par = $(this).parent().parent();
par.remove();
ID--;
};
$("#Table1").on("click", ".BtnMinus", deleteRow);
});
</script>
<table id="Table1" cellspacing="3">
<tr>
<td>Name: <input type="text" name="aa0" id="aa0" /></td>
<td>File: <input type="file" name="fileUpload0"/></td>
<td><input type="button" class="BtnPlus" value="+" /></td>
<td><input type="button" class="BtnMinus" value="-" /></td>
</tr>
</table>
<script src="jquery-2.1.1.js" language="javascript" type="application/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ID = 1;
function addRow() {
var html = '<tr>' +
'<td>Name: <input type="text" name="aa' + ID + '" /></td>' +
'<td>File: <input type="file" name="fileUpload' + ID + '" /></td>' +
'<td><input type="button" class="BtnPlus" value="+" /></td>' +
'<td><input type="button" class="BtnMinus" value="-" /></td>' +
'</tr>'
$(html).appendTo($("#Table1"))
ID++;
};
$("#Table1").on("click", ".BtnPlus", addRow);
function deleteRow() {
if(ID==1) return;
var par = $(this).parent().parent();
par.remove();
ID--;
};
$("#Table1").on("click", ".BtnMinus", deleteRow);
});
</script>
<table id="Table1" cellspacing="3">
<tr>
<td>Name: <input type="text" name="aa0" id="aa0" /></td>
<td>File: <input type="file" name="fileUpload0"/></td>
<td><input type="button" class="BtnPlus" value="+" /></td>
<td><input type="button" class="BtnMinus" value="-" /></td>
</tr>
</table>
0 comments:
Post a Comment