динамическое вычисление операций со строками и столбцами в таблице в форме html - PullRequest
Новая
       5

динамическое вычисление операций со строками и столбцами в таблице в форме html

0 голосов
/ 03 августа 2020

Форма для выставления счетов

Я пытаюсь создать форму для выставления счетов, в которой мне нужно автоматически отображать сумму, сгенерированную после ввода значений в столбцы цены и количества. Но с помощью следующего кода я могу вычислить его только для одной строки. Я хочу, чтобы он работал для каждой строки каждый раз, когда я ввожу в нее значения, и в конце он также должен отображать общую сумму столбца суммы. 

function deleteRow(row)
{
  var i=row.parentNode.parentNode.rowIndex;
  document.getElementById('billingSheet').deleteRow(i);
}

function addRow(){

  var x=document.getElementById('billingSheet');
     // deep clone the targeted row
  var new_row = x.rows[1].cloneNode(true);
     // get the total number of rows
  var len = x.rows.length;
     // set the innerHTML of the first row 
  new_row.cells[0].innerHTML = len;

  // grab the input from the first cell and update its ID and value
  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';

     // grab the input from the second cell and update its ID and value
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';

  // grab the input from the third cell and update its ID and value
  var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
  inp3.id += len;
  inp3.value = '';

   // append the new row to the table
  x.appendChild( new_row );

}


function calc(){
$('#input1,#input2').keyup(function(){
   var textValue1 =$('#input1').val();
   var textValue2 = $('#input2').val();

  $('#output').val(textValue1 * textValue2); 
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="billingSheet" border="1" width="65%">
  <tr>
    <th>Serial No</th>
    <th>Enter item name</th>
    <th> Price </th>
    <th> Quantity </th>
    <th> Amount</th>
    <th>Add</th>
    <th>Delete</th>
  </tr>  
  <tr>
    <td>1</td>
    <td><input type="text"></td>
    <td><input type="number" name="input1" id="input1" onkeyup="calc()"></td>
    <td><input type="number" name="input2" id="input2" onkeyup="calc()"></td>
    <td><input type="text" name="output" id="output" value=""></td>
    <td><input type="button" id="add" value="Add Row" onClick="addRow()"/></td>
    <td><input type="button" id="delete" value="Delete Row" onclick="deleteRow(this)"></td>
  </tr>
</table>

1 Ответ

5 голосов
/ 06 августа 2020 

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('billingSheet').deleteRow(i);
}

var input1 = "";

function addRow() {

  var x = document.getElementById('billingSheet');
  // deep clone the targeted row
  var new_row = x.rows[1].cloneNode(true);
  // get the total number of rows
  var len = x.rows.length;
  // set the innerHTML of the first row 
  new_row.cells[0].innerHTML = len;

  // grab the input from the first cell and update its ID and value
  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';

  // grab the input from the second cell and update its ID and value
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.name = len;
  inp2.value = '';

  // grab the input from the third cell and update its ID and value
  var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
  inp3.id += len;
  inp3.name = len;
  inp3.value = '';

  // grab the input from the third cell and update its ID and value
  var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
  inp4.id = "output" + len;
  inp4.value = '';

  // append the new row to the table
  x.appendChild(new_row);

}


function calc(input, name) {
  if (!input.value || isNaN(input.value))
    return;
 
    var str = input.id.substr(6, input.id.length);
    var textValue1 = $('#input1' + str).val();
    var textValue2 = $('#input2' + str).val();

    $('#output' + name).val(textValue1 * textValue2);
 
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
 
</head>

<body>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <table id="billingSheet" border="1" width="65%">
    <tr>
      <th>Serial No</th>
      <th>Enter item name</th>
      <th> Price </th>
      <th> Quantity </th>
      <th> Amount</th>
      <th>Add</th>
      <th>Delete</th>
    </tr>  
    <tr>
      <td>1</td>
      <td><input type="text"></td>
      <td><input type="number" name ="1" id="input1" onkeyup="calc(this,name)"></td>
      <td><input type="number" name ="1" id="input2" onkeyup="calc(this,name)"></td>
      <td><input type="text" name="output1" id="output1" value=""></td>
      <td><input type="button" id="add" value="Add Row" onClick="addRow()"/></td>
      <td><input type="button" id="delete" value="Delete Row" onclick="deleteRow(this)"></td>
    </tr>
  </table>

</body>
<script src="js/index.js"></script>


</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...