Add jQuery library in your page

  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Write some script for add or remove
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $('#add').click(function () {
  4. var table = $(this).closest('table');
  5. console.log(table.find('input:text').length);
  6. if (table.find('input:text').length < 50) {
  7. var x = $(this).closest('tr').nextAll('tr');
  8. $.each(x, function (i, val) {
  9. val.remove();
  10. });
  11. table.append('
  12. <tr>
  13. <td style="width:200px;" align="right">First Name
  14. <td>
  15. <input type="text" id="current Name" value="" />
  16. </td>
  17. <td style="width:200px;" align="right">Last Name
  18. <td>
  19. <input type="text" id="current Name" value="" />
  20. </td>
  21. </tr>');
  22. $.each(x, function (i, val) {
  23. table.append(val);
  24. });
  25. }
  26. });
  27. $('#del').click(function () {
  28. var table = $(this).closest('table');
  29. if (table.find('input:text').length > 1) {
  30. table.find('input:text').last().closest('tr').remove();
  31. }
  32. });});
  34. </script>
Then create design whether you want to show this.
  1. <table border="0" cellspacing="2">
  2. <tr>
  3. <td style="width:200px;" align="right">Name
  5. <td>
  6. <input type="text" id="Job Name" value="" />
  7. </td>
  8. </td>
  9. </tr>
  10. <tr>
  11. <td align="right">Versions</td>
  12. <td>
  13. <select id="version" style="width:350px;">
  14. <option value="">SELECT</option>
  15. </select>
  16. </td>
  17. </tr>
  18. <tr>
  19. <td align="right">Test Scripts</td>
  20. <td>
  21. <select id="testscripts" style="width:350px;"></select>
  22. </td>
  23. </tr>
  24. <tr>
  25. <td align="right">datas</td>
  26. <td>
  27. <input type="button" id="add" value="Add" />
  28. <input type="button" id="del" value="Del" />
  29. </td>
  30. </tr>
  31. <tr>
  32. <td style="height:3px" colspan="2"></td>
  33. </tr>
  34. </table>
Now your code looks like the following:

AddTextbox page
  1. <html>
  2. <head>
  3. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function () {
  6. $('#add').click(function () {
  7. var table = $(this).closest('table');
  8. console.log(table.find('input:text').length);
  9. if (table.find('input:text').length < 50) {
  10. var x = $(this).closest('tr').nextAll('tr');
  11. $.each(x, function (i, val) {
  12. val.remove();
  13. });
  14. table.append('
  15. <tr>
  16. <td style="width:200px;" align="right">First Name
  17. <td>
  18. <input type="text" id="current Name" value="" />
  19. </td>
  20. <td style="width:200px;" align="right">Last Name
  21. <td>
  22. <input type="text" id="current Name" value="" />
  23. </td>
  24. </tr>');
  25. $.each(x, function (i, val) {
  26. table.append(val);
  27. });
  28. }
  29. });
  30. $('#del').click(function () {
  31. var table = $(this).closest('table');
  32. if (table.find('input:text').length > 1) {
  33. table.find('input:text').last().closest('tr').remove();
  34. }
  35. });});
  36. </script>
  37. </head>
  38. <body>
  39. <table border="0" cellspacing="2">
  40. <tr>
  41. <td style="width:200px;" align="right">Name
  43. <td>
  44. <input type="text" id="Job Name" value="" />
  45. </td>
  46. </td>
  47. </tr>
  48. <tr>
  49. <td align="right">Versions</td>
  50. <td>
  51. <select id="version" style="width:350px;">
  52. <option value="">SELECT</option>
  53. </select>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td align="right">Test Scripts</td>
  58. <td>
  59. <select id="testscripts" style="width:350px;"></select>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td align="right">datas</td>
  64. <td>
  65. <input type="button" id="add" value="Add" />
  66. <input type="button" id="del" value="Del" />
  67. </td>
  68. </tr>
  69. <tr>
  70. <td style="height:3px" colspan="2"></td>
  71. </tr>
  72. </table>
  73. </body>
  74. </html>

Figure 1: Output