In this blog you can find Source Code for jQuery Practice with real Task- Part -7.
I highly recommend to see Video of Part 6 to understand creation of controls dynamically using jQuery.
Links are :
Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button
Task-7 jQuery Practice: Remove Dynamically Added Rows.
CLICK HERE to get Source Code of Task -6.
Code for Task 7 is given below:
<body>
<table style="border:1px solid blue;">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th><input type="button" value="ADD" id="btnADD"></th>
</tr>
</thead>
<tbody id="tblEmpData">
<tr id="TR_1">
<td><input type="text" /></td>
<td><input type="text" /></td>
<td> </td>
</tr>
</tbody>
</table>
<script>
$('#btnADD').click(function () {
var TotalRowsinTBody = $('#tblEmpData >tr').length; // Total Existing Rows of Tbody
var NewRowNumber = TotalRowsinTBody + 1; // code for id of new genrating rows
var dynamicHtmlText = "<tr id='TR_" + NewRowNumber + "'>"; // here we have to give id
dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
dynamicHtmlText += "<td><input type='button' value='Remove' onclick='DeleteRow(" + NewRowNumber + ")' ></td>";//
dynamicHtmlText += "</tr>";
// Add to tbody
$('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
});
function DeleteRow(rowNumber)
{
$('#TR_' + rowNumber).remove(); // remove specified row.
}
</script>
</body>
Happy coding.
Rudra Pratap Singh
Software Engineer
I highly recommend to see Video of Part 6 to understand creation of controls dynamically using jQuery.
Links are :
Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button
Task-7 jQuery Practice: Remove Dynamically Added Rows.
CLICK HERE to get Source Code of Task -6.
Code for Task 7 is given below:
<body>
<table style="border:1px solid blue;">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th><input type="button" value="ADD" id="btnADD"></th>
</tr>
</thead>
<tbody id="tblEmpData">
<tr id="TR_1">
<td><input type="text" /></td>
<td><input type="text" /></td>
<td> </td>
</tr>
</tbody>
</table>
<script>
$('#btnADD').click(function () {
var TotalRowsinTBody = $('#tblEmpData >tr').length; // Total Existing Rows of Tbody
var NewRowNumber = TotalRowsinTBody + 1; // code for id of new genrating rows
var dynamicHtmlText = "<tr id='TR_" + NewRowNumber + "'>"; // here we have to give id
dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
dynamicHtmlText += "<td><input type='button' value='Remove' onclick='DeleteRow(" + NewRowNumber + ")' ></td>";//
dynamicHtmlText += "</tr>";
// Add to tbody
$('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
});
function DeleteRow(rowNumber)
{
$('#TR_' + rowNumber).remove(); // remove specified row.
}
</script>
</body>
Happy coding.
Rudra Pratap Singh
Software Engineer
No comments:
Post a Comment