kadyr

konkov edit

Jun 14th, 2021
516
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.     <button class="sumer">
  36.         S
  37.     </button>
  38.  
  39.     <table>
  40.         <thead>
  41.             <tr>
  42.                 <th>Наименование</th>
  43.                 <th>Кол-во</th>
  44.                 <th>Цена</th>
  45.                 <th>Сумма</th>
  46.                 <th>Операция</th>
  47.             </tr>
  48.         </thead>
  49.         <tbody>
  50.             <tr>
  51.                 <td><input type='text' class=''></td>
  52.                 <td><input type='text' class='typer'></td>
  53.                 <td><input type='text' class='typer'></td>
  54.                 <td>
  55.                     <p class="sumText">123</p>
  56.                 </td>
  57.                 <td style='display: flex;'>
  58.                     <button class='remove-row'>remove-row</button>
  59.                     <button class='remove-row'>remove-row</button>
  60.                     <button class='remove-row'>remove-row</button>
  61.                 </td>
  62.             </tr>
  63.         </tbody>
  64.     </table>
  65.     <h1>Итого : 0</h1>
  66.     <script>
  67.         //Adding Elements
  68.         function ss(val) {
  69.             // console.log($((val.parentElement.parentElement).children().children('.dd'))).get(0).nodeName);
  70.         }
  71.  
  72.         var c = 0;
  73.         $(document).ready(function () {
  74.             element_html = "<tr><td><input type='text'></td><td><input type='text' class='typer'></td><td><input type='text' class='typer'></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
  75.             $(".add-row").click(function () {
  76.                 var tableBody = $("table tbody");
  77.                 $(".remove-row").unbind('click');
  78.                 $(document).on('click', '.remove-row', function () {
  79.                     $(this).parent().parent().remove();
  80.                 });
  81.                 $(document).on('click', '.close-row', function () {
  82.                     $(this).parent().parent().find('input').prop('disabled', true);
  83.                 });
  84.                 $(document).on('click', '.enable-row', function () {
  85.                     $(this).parent().parent().find('input').prop('disabled', false);
  86.                 });
  87.                 $(document).on('input', '.typer', function(){
  88.                     var t = $(this).parent().parent().find('.typer');
  89.                     console.log($(t[0]).val());
  90.                     $(this).parent().parent().find('p').text($(t[0]).val()*$(t[1]).val());
  91.                 })
  92.                 tableBody.append(element_html);
  93.             })
  94.             $(".sumer").click(function(){
  95.                 var t = $('p');
  96.                 var f = 0;
  97.                 for(var i = 0; i<t.length;i++){
  98.                     console.log(t[i].textContent);
  99.                     f += parseInt(t[i].textContent);
  100.                 }
  101.                 $('h1').text(f);
  102.             })
  103.         })
  104.     </script>
  105. </body>
  106.  
  107. </html>
RAW Paste Data