Advertisement
Guest User

Untitled

a guest
Dec 7th, 2016
68
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.05 KB | None | 0 0
  1. <table width="50%" border="1" cellpadding="1" cellspacing="1" class="test" id="test">
  2. <tr id="columname">
  3. <th>Name</th>
  4. <th>Emp no.</th>
  5. <th>Company</th>
  6. <th>Mobile no.</th>
  7. </tr>
  8. <tr>
  9. <td>
  10. <input type="text" class="txtbox" value="" />
  11. <input type="button" value="Add" class="plusbtn" />
  12. <input type="button" value="Remove" class="minusbtn" />
  13. </td>
  14. <td>
  15. <input type="text" class="txtbox" value="" />
  16. <input type="button" value="Add" class="plusbtn1" />
  17. <input type="button" value="Remove" class="minusbtn1" />
  18. </td>
  19. <td>
  20. <input type="text" class="txtbox" value="" />
  21. <input type="button" value="Add" class="plusbtn2" />
  22. <input type="button" value="Remove" class="minusbtn2" />
  23. </td>
  24. <td>
  25. <input type="text" class="txtbox" value="" />
  26. <input type="button" value="Add" class="plusbtn3" />
  27. <input type="button" value="Remove" class="minusbtn3" />
  28. </td>
  29. </tr>
  30. </table>
  31. JQUERY :
  32. var Row = document.getElementById("columname");
  33. var Cells = Row.getElementsByTagName("th");
  34. $('#test').on('click','.plusbtn',function()
  35. {
  36. if(Cells[0].innerText == 'Name'){
  37. $('#test').append('<tr><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn" /><input type="button" value="Remove" class="minusbtn" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn1" /><input type="button" value="Remove" class="minusbtn1" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn2" /><input type="button" value="Remove" class="minusbtn2" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
  38. return false;
  39. }
  40. });
  41. if(Cells[1].innerText == 'Emp no.'){
  42. $('#test').on('click','.plusbtn1',function(){
  43. $('#test').append('<tr><td></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn1" /><input type="button" value="Remove" class="minusbtn1" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn2" /><input type="button" value="Remove" class="minusbtn2" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
  44. return false;
  45. });
  46. }
  47. if(Cells[2].innerText == 'Company'){
  48. $('#test').on('click','.plusbtn2',function(){
  49. $('#test').clone().append('<tr><td></td><td></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn2" /><input type="button" value="Remove" class="minusbtn2" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
  50. return false;
  51. });
  52. }
  53. if(Cells[3].innerText == 'Mobile no.'){
  54. $('#test').on('click','.plusbtn3',function(){
  55. $('#test').append('<tr><td></td><td></td><td></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
  56. return false;
  57. });
  58. }
  59. $('#test').on('click','.minusbtn',function(){
  60. if($("#test tr").length != 2)
  61. {
  62. $(this).closest('tr').remove();
  63. return false;
  64. }
  65. else
  66. {
  67. alert("You cannot delete first row");
  68. }
  69. });
  70. $('#test').on('click','.minusbtn1',function(){
  71. if($("#test tr").length != 2)
  72. {
  73. $(this).closest('tr').remove();
  74. return false;
  75. }
  76. else
  77. {
  78. alert("You cannot delete first row");
  79. }
  80. });
  81. $('#test').on('click','.minusbtn2',function(){
  82. if($("#test tr").length != 2)
  83. {
  84. $(this).closest('tr').remove();
  85. return false;
  86. }
  87. else
  88. {
  89. alert("You cannot delete first row");
  90. }
  91. });
  92. $('#test').on('click','.minusbtn3',function(){
  93. if($("#test tr").length != 2)
  94. {
  95. $(this).closest('tr').remove();
  96. return false;
  97. }
  98. else
  99. {
  100. alert("You cannot delete first row");
  101. }
  102. });
  103. CSS:
  104. txtbox { border: none; width: 100%; } input { font-size: 17px; height: 30px;
  105. } table { background: none repeat scroll 0 0 ; border: 1px solid #000; } #test { border-collapse: separate; empty-cells: hide; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement