Post
Ask Question
Nidhi Donga

Nidhi Donga

  • NA
  • 88
  • 8.9k

Delete Row is not working in below code.

Jul 29 2019 12:46 AM
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test_table_dynamic.aspx.cs" Inherits="Test_captcha.test_table_dynamic" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title></title>  
  6. <link href="Content/bootstrap.css" rel="stylesheet" />  
  7. <script src="Scripts/jquery-3.0.0.js"></script>  
  8. <script src="Scripts/bootstrap.js"></script>  
  9. <style>  
  10. body {  
  11. font-family: 'lato', sans-serif;  
  12. }  
  13. .container {  
  14. max-width: 1000px;  
  15. margin-left: auto;  
  16. margin-right: auto;  
  17. padding-left: 10px;  
  18. padding-right: 10px;  
  19. }  
  20. h2 {  
  21. font-size: 26px;  
  22. margin: 20px 0;  
  23. text-align: center;  
  24. }  
  25. h2 small {  
  26. font-size: 0.5em;  
  27. }  
  28. .responsive-table li {  
  29. border-radius: 3px;  
  30. padding: 25px 30px;  
  31. display: flex;  
  32. justify-content: space-between;  
  33. margin-bottom: 25px;  
  34. }  
  35. .responsive-table .table-header {  
  36. background-color: #95A5A6;  
  37. font-size: 14px;  
  38. text-transform: uppercase;  
  39. letter-spacing: 0.03em;  
  40. }  
  41. .responsive-table .table-row {  
  42. background-color: #ffffff;  
  43. box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);  
  44. }  
  45. .responsive-table .col-1 {  
  46. flex-basis: 5%;  
  47. }  
  48. .responsive-table .col-2 {  
  49. flex-basis: 50%;  
  50. }  
  51. .responsive-table .col-3 {  
  52. flex-basis: 25%;  
  53. }  
  54. .responsive-table .col-4 {  
  55. flex-basis: 25%;  
  56. }  
  57. @media all and (max-width: 767px) {  
  58. .responsive-table .table-header {  
  59. display: none;  
  60. }  
  61. .responsive-table li {  
  62. display: block;  
  63. }  
  64. .responsive-table .col {  
  65. flex-basis: 100%;  
  66. }  
  67. .responsive-table .col {  
  68. display: flex;  
  69. padding: 10px 0;  
  70. }  
  71. .responsive-table .col:before {  
  72. color: #6C7A89;  
  73. padding-right: 10px;  
  74. content: attr(data-label);  
  75. flex-basis: 50%;  
  76. text-align: right;  
  77. }  
  78. }  
  79. </style>  
  80. <script type="text/javascript">  
  81. function addRow(tableID) {  
  82. var table = document.getElementById(tableID);  
  83. var rowCount = table.rows.length;  
  84. var row = table.insertRow(rowCount);  
  85. var colCount = table.rows[0].cells.length;  
  86. for (var i = 0; i < colCount; i++) {  
  87. var newcell = row.insertCell(i);  
  88. newcell.innerHTML = table.rows[0].cells[i].innerHTML;  
  89. //alert(newcell.childNodes);  
  90. switch (newcell.childNodes[0].type) {  
  91. case "text":  
  92. newcell.childNodes[0].value = "";  
  93. break;  
  94. case "checkbox":  
  95. newcell.childNodes[0].checked = false;  
  96. break;  
  97. case "select-one":  
  98. newcell.childNodes[0].selectedIndex = 0;  
  99. break;  
  100. }  
  101. }  
  102. }  
  103. function deleteRow(tableID) {  
  104. try {  
  105. var table = document.getElementById(tableID);  
  106. var rowCount = table.rows.length;  
  107. for (var i = 0; i < rowCount; i++) {  
  108. var row = table.rows[i];  
  109. var chkbox = row.cells[0].childNodes[0];  
  110. if (null != chkbox && true == chkbox.checked) {  
  111. if (rowCount <= 1) {  
  112. alert("Cannot delete all the rows.");  
  113. break;  
  114. }  
  115. table.deleteRow(i);  
  116. rowCount--;  
  117. i--;  
  118. }  
  119. }  
  120. } catch (e) {  
  121. alert(e);  
  122. }  
  123. }  
  124. </script>  
  125. </head>  
  126. <body>  
  127. <form id="form1" runat="server">  
  128. <div class="container">  
  129. <h2>Sprinkler Irrigation Component's price <small></small></h2>  
  130. <ul class="responsive-table">  
  131. <li class="table-row">  
  132. <div class="col col-1" data-label="Job Id">Email:</div>  
  133. <div class="col col-2" data-label="Customer Name">  
  134. <asp:TextBox CssClass="form-control" ID="c_email" placeholder="Email" runat="server"></asp:TextBox>  
  135. </div>  
  136. <div class="col col-3" data-label="Amount"></div>  
  137. </li>  
  138. </ul>  
  139. </div>  
  140. <div class="container">  
  141. <ul class="responsive-table">  
  142. <li class="table-row">  
  143. <div class="col col-1" data-label="Job Id">Nozzle</div>  
  144. <div class="col col-2">  
  145. <table id="dataTable" class="table-bordered table-hover table-striped table">  
  146. <tr>  
  147. <td>  
  148. <input type="checkbox" name="chk" /></td>  
  149. <td>  
  150. <asp:TextBox ID="TextBox1" runat="server" type="text" placeholder="LPH"></asp:TextBox></td>  
  151. <td>  
  152. <asp:TextBox ID="TextBox2" runat="server" type="text" placeholder="RS./unit"></asp:TextBox></td>  
  153. </tr>  
  154. </table>  
  155. </div>  
  156. <div class="col col-3"></div>  
  157. <div class="col col-4">  
  158. <input type="button" class="btn btn-danger active" value="Add Row" onclick="addRow('dataTable')" /><hr />  
  159. <input type="button" class="btn btn-info active" value="Delete Row" onclick="deleteRow('dataTable')" />  
  160. </div>  
  161. </li>  
  162. </ul>  
  163. </div>  
  164. </form>  
  165. </body>  
  166. </html>  
In the above code i can insert the textbox by hitting add row button but delete row button is not working

Answers (2)