Сброс строки таблицы после использования кнопки javascript - PullRequest
Новая
       0

Сброс строки таблицы после использования кнопки javascript

2 голосов
/ 14 апреля 2020

Итак, у меня есть следующий код: 

$('input.qty').change(function() {
  var $tr = $(this).closest('tr');
  var price = $(this).closest('tr').find('input.price').val();
  // var price = parseFloat($tr.find('td').eq(1).text());
  var qty = parseInt($(this).val());
  $(this).closest('tr').find('input.amt').val(qty * price);
});
.tis {
  border: none;
  background-color: Transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>


<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Bootstrap CSS/CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   
  

  </head>

  <body>

    <main role="main">

      <script type="text/javascript">
      
      function addRow() {
 var table = document.getElementById("invoiceTableBody")
 table.innerHTML+=
 '<tr>' +
   '<td>'+
     '<div>'+
       '<select class="try" name="this">'+

       '<option value="Option1">Option 1</option>'+
       '<option value="Option2">Option 2</option>'+
       '<option value="Option3">Option 3</option>'+

       '</select>'+
     '</div>'+
   '</td>'+
   '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
   '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
   '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
   '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +
 '</tr>';
};

</script>

      <div class="row">
        <div class="col-md-8 offset-2">

          <table class="table thead-dark table-hover border-bottom" id="invoiceTable">

            <thead>
              <tr>
                <th style="width: 60%">Item - Description</th>
                <th style="width: 10%">Price</th>
                <th style="width: 5%">Qty</th>
                <th style="width: 10%">Amount</th>
                <th style=>Action</th>
              </tr>
            </thead>

            <tbody id="invoiceTableBody">
              <tr id="invoiceTableRow">

                <td>
                  <div>
                    <select class="try" name="this">
                      <option value="<Option1">Option 1</option>
                      <option value="<Option2">Option 2</option>
                      <option value="<Option3">Option 3</option>
                    </select>
                  </div>
                </td>

                <td><input type="text" name="l108Price[]" size="3" class="price tis"></td>
                <td><input type="text" name="l108Qty[]" size="1" class="qty tis"></td>
                <td><input type='text' name='l108Amt[]' size='3' class="amt tis" disabled></td>
                <td>
                  <div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>


    </main><!-- /role main -->


  </body>

</html>

Целью здесь является создание системы выставления счетов. Все работает нормально, пока я пытаюсь добавить строку, нажав кнопку в конце строки. Как только я это сделаю, все сбрасывается, и я понятия не имею, почему.

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Проблема вызвана table.innerHTML += '<tr>...</tr>';. оператор.

innerHTML изменяет HTML объекта, что, безусловно, может повлиять на размер и положение и вызовет по крайней мере частичное переформатирование. Вот почему содержимое строки вашей таблицы будет сброшено.

Вместо этого используйте метод HTMLElement.prototype.insertAdjacentHTML для правильной вставки HTMLElements в DOM. Поэтому я немного переписал ваш код: 

$('#invoiceTableBody').on('change', 'input.qty', function() {
  var $tr = $(this).closest('tr');
  var price = $(this).closest('tr').find('input.price').val();
  // var price = parseFloat($tr.find('td').eq(1).text());
  var qty = parseInt($(this).val());
  $(this).closest('tr').find('input.amt').val(qty * price);
});
.tis {
  border: none;
  background-color: Transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>


<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <!-- Bootstrap CSS/CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">




</head>

<body>

  <main role="main">

    <script type="text/javascript">
      function addRow() {
        var table = document.getElementById("invoiceTableBody")
        // Composing your HTMLElement as a string
        var element =
          '<tr>' +
          '<td>' +
          '<div>' +
          '<select class="try" name="this">' +

          '<option value="Option1">Option 1</option>' +
          '<option value="Option2">Option 2</option>' +
          '<option value="Option3">Option 3</option>' +

          '</select>' +
          '</div>' +
          '</td>' +
          '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
          '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
          '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
          '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>' +
          '</tr>';

        // Inserting the string as a HTMLElement at the end of the table element
        table.insertAdjacentHTML('beforeend', element);
      };
    </script>

    <div class="row">
      <div class="col-md-8 offset-2">

        <table class="table thead-dark table-hover border-bottom" id="invoiceTable">

          <thead>
            <tr>
              <th style="width: 60%">Item - Description</th>
              <th style="width: 10%">Price</th>
              <th style="width: 5%">Qty</th>
              <th style="width: 10%">Amount</th>
              <th style=>Action</th>
            </tr>
          </thead>

          <tbody id="invoiceTableBody">
            <tr id="invoiceTableRow">

              <td>
                <div>
                  <select class="try" name="this">
                    <option value="<Option1">Option 1</option>
                    <option value="<Option2">Option 2</option>
                    <option value="<Option3">Option 3</option>
                  </select>
                </div>
              </td>

              <td><input type="text" name="l108Price[]" size="3" class="price tis"></td>
              <td><input type="text" name="l108Qty[]" size="1" class="qty tis"></td>
              <td><input type='text' name='l108Amt[]' size='3' class="amt tis" disabled></td>
              <td>
                <div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


  </main>
  <!-- /role main -->


</body>

</html>

Если вы хотите добавить новую строку прямо под той, на которую вы нажали, вы можете сделать это, используя код ниже. Я удалил ваш скрипт из HTML: 

$('#invoiceTableBody').on('click', 'button.action', function() {
  var row = event.target.closest(".invoiceTableRow");
  // Composing your HTMLElement as a string
  var element =
    '<tr class="invoiceTableRow">' +
    '<td>' +
    '<div>' +
    '<select class="try" name="this">' +

    '<option value="Option1">Option 1</option>' +
    '<option value="Option2">Option 2</option>' +
    '<option value="Option3">Option 3</option>' +

    '</select>' +
    '</div>' +
    '</td>' +
    '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
    '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
    '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
    '<td><div><button type="button" name="button" style="background-color:Transparent; border:none; color:green;" class="action"><i class="fas fa-plus-circle"></i></button></div></td>' +
    '</tr>';

  // Inserting the string as a HTMLElement after the current row
  row.insertAdjacentHTML('afterend', element);
});

$('#invoiceTableBody').on('change', 'input.qty', function() {
  var $tr = $(this).closest('tr');
  var price = $(this).closest('tr').find('input.price').val();
  // var price = parseFloat($tr.find('td').eq(1).text());
  var qty = parseInt($(this).val());
  $(this).closest('tr').find('input.amt').val(qty * price);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <!-- Bootstrap CSS/CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">




</head>

<body>

  <main role="main">

    <script type="text/javascript">
    </script>

    <div class="row">
      <div class="col-md-8 offset-2">

        <table class="table thead-dark table-hover border-bottom" id="invoiceTable">

          <thead>
            <tr>
              <th style="width: 60%">Item - Description</th>
              <th style="width: 10%">Price</th>
              <th style="width: 5%">Qty</th>
              <th style="width: 10%">Amount</th>
              <th style=>Action</th>
            </tr>
          </thead>

          <tbody id="invoiceTableBody">
            <tr id="invoiceTableRow" class="invoiceTableRow">

              <td>
                <div>
                  <select class="try" name="this">
                    <option value="<Option1">Option 1</option>
                    <option value="<Option2">Option 2</option>
                    <option value="<Option3">Option 3</option>
                  </select>
                </div>
              </td>

              <td><input type="text" name="l108Price[]" size="3" class="price tis"></td>
              <td><input type="text" name="l108Qty[]" size="1" class="qty tis"></td>
              <td><input type='text' name='l108Amt[]' size='3' class="amt tis" disabled></td>
              <td>
                <div><button type="button" name="button" class="action" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


  </main>
  <!-- /role main -->


</body>

</html>
1 голос
/ 14 апреля 2020

Вы сделали очень простую ошибку, проверьте ваш код здесь: 

var table = document.getElementById("invoiceTableBody")
 table.innerHTML+=
 '<tr>' +
   '<td>'+
     '<div>'+
       '<select class="try" name="this">'+

       '<option value="Option1">Option 1</option>'+
       '<option value="Option2">Option 2</option>'+
       '<option value="Option3">Option 3</option>'+

       '</select>'+
     '</div>'+
   '</td>'+
   '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
   '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
   '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
   '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +
 '</tr>';

В этой строке должна быть точка с запятой: 

'<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +

Вы должны изменить это строка к этому: 

'<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'+

Таким образом, ваш бл c должен выглядеть так: 

var table = document.getElementById("invoiceTableBody")
 table.innerHTML+=
 '<tr>' +
   '<td>'+
     '<div>'+
       '<select class="try" name="this">'+

       '<option value="Option1">Option 1</option>'+
       '<option value="Option2">Option 2</option>'+
       '<option value="Option3">Option 3</option>'+

       '</select>'+
     '</div>'+
   '</td>'+
   '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
   '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
   '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
   '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>' +
 '</tr>';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...