You can find here source code for jQuery Practice with real Task- Part 6
YouTube link for this task video is given below :
Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button
<!DOCTYPE html>
<html>
<head>
<title>Task-6: Add Control Dynamically on Button Click</title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<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>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td> </td>
</tr>
</tbody>
</table>
<script>
$('#btnADD').click(function () {
var dynamicHtmlText = "<tr>";
dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
dynamicHtmlText += "<td> </td>";// for 3rd td
dynamicHtmlText += "</tr>";
// Add to tbody
$('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
});
</script>
</body>
</html>
Happy coding.
Rudra Pratap Singh
Software Engineer
YouTube link for this task video is given below :
Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button
<!DOCTYPE html>
<html>
<head>
<title>Task-6: Add Control Dynamically on Button Click</title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<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>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td> </td>
</tr>
</tbody>
</table>
<script>
$('#btnADD').click(function () {
var dynamicHtmlText = "<tr>";
dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
dynamicHtmlText += "<td> </td>";// for 3rd td
dynamicHtmlText += "</tr>";
// Add to tbody
$('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
});
</script>
</body>
</html>
Happy coding.
Rudra Pratap Singh
Software Engineer
No comments:
Post a Comment