kadyr

Task Konkov

Jun 13th, 2021
766
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3. <head>
  4.     <title>
  5.         Karagishiev jquery
  6.     </title>
  7.  
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  9.     </script>
  10.  
  11.     <style>
  12.         table {
  13.             margin: 25px 0;
  14.             width: 100px;
  15.         }
  16.  
  17.         table th,
  18.         table td {
  19.             text-align: center;
  20.         }
  21.  
  22.         table,
  23.         th,
  24.         td {
  25.             border: 1px solid;
  26.         }
  27.     </style>
  28. </head>
  29.  
  30. <body>
  31.  
  32.     <button class="add-row">
  33.         +
  34.     </button>
  35.  
  36.  
  37.     <table>
  38.         <thead>
  39.             <tr>
  40.                 <th>Наименование</th>
  41.                 <th>Кол-во</th>
  42.                 <th>Цена</th>
  43.                 <th>Сумма</th>
  44.                 <th>Операция</th>
  45.             </tr>
  46.         </thead>
  47.         <tbody>
  48.             <tr>
  49.                 <td><input type='text'></td>
  50.                 <td><input type='text'></td>
  51.                 <td><input type='text'></td>
  52.                 <td>
  53.                     <p class="sumText">123</p>
  54.                 </td>
  55.                 <td style='display: flex;'>
  56.                     <button class='remove-row'>remove-row</button>
  57.                     <button class='remove-row'>remove-row</button>
  58.                     <button class='remove-row'>remove-row</button>
  59.                 </td>
  60.             </tr>
  61.         </tbody>
  62.     </table>
  63.  
  64.     <script>
  65.         //Adding Elements
  66.         function ss(val) {
  67.             // console.log($((val.parentElement.parentElement).children().children('.dd'))).get(0).nodeName);
  68.         }
  69.  
  70.         var c = 0;
  71.         $(document).ready(function () {
  72.             element_html = "<tr><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><p class='sumText'>123</p></td><td style='display: flex;'><button class='remove-row'>remove-row</button><button class='close-row'>close-row</button><button class='enable-row'>enable-row</button></td></tr>"; // Element to add
  73.             $(".add-row").click(function () {
  74.                 var tableBody = $("table tbody");
  75.                 $(".remove-row").unbind('click');
  76.                 $(document).on('click', '.remove-row', function () {
  77.                     $(this).parent().parent().remove();
  78.                 });
  79.                 $(document).on('click', '.close-row', function () {
  80.                     $(this).parent().parent().find('input').prop('disabled', true);
  81.                 });
  82.                 $(document).on('click', '.enable-row', function () {
  83.                     $(this).parent().parent().find('input').prop('disabled', false);
  84.                 });
  85.                 tableBody.append(element_html);
  86.             })
  87.         })
  88.     </script>
  89. </body>
  90.  
  91. </html>
RAW Paste Data