Onkeyupのみを使用して特定の列セルの値と合計値を取得する方法

Htmlの新機能です.4つのセル（ItemName、Quantity、QuantityType、Amount）を持つ動的表を作成しました。私はonkeyupメソッドを使用して、すべての行の総計（セル）を合計し、その合計値を別の入力ボックスに入れます。 Amountセルの値を編集して合計値にも影響する場合私はそれも合計で影響を与えたいクリックした場合、私は各行に削除ボタンがあります。私はちょうどjavascriptがほしいですする方法。Onkeyupのみを使用して特定の列セルの値と合計値を取得する方法

私を助けてください！

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <style> 
 
     div { 
 
      background: red; 
 
      margin: 5px; 
 
     } 
 

 
     table { 
 
      border: 2px solid black; 
 
     } 
 

 
     td { 
 
      padding: 10px; 
 
      border: 1px solid lightgrey; 
 
     } 
 

 
    </style> 
 

 
    <script> 
 

 
      function createTable() { 
 
       var numRows = document.getElementById('number').value; 
 
       if (numRows == "") { 
 
        alert("Please enter some numeric value"); 
 
       } else { 
 
        var th = document.querySelectorAll('#table th'); 
 
        if (!th.length) { 
 
         var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>"; 
 
         var table = document.createElement('table'); 
 
         table.innerHTML = rows; 
 
         document.getElementById("table").appendChild(table.firstChild); 
 
        } 
 

 
        for (var i = 0; i < numRows; i++) { 
 
         var elems = ''; 
 
         elems += "<tr><td><input type='text' name='" + "name".concat(i + 1) + "'></td><td><input type='text' name='" + "quantity".concat(i + 1) + "'></td><td><input type='text' name='" + "qtype".concat(i + 1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i + 1) + "'></td><td><input type='button' class='del_img' onClick= 'delSpec(this)' value='Delete'></td></tr>"; 
 
         var table = document.createElement('table'); 
 
         table.innerHTML = elems; 
 
         document.getElementById("table").appendChild(table.firstChild); 
 
        } 
 
       } 
 
      } 
 

 
      // window.onkeyup = keyup; 
 
      //function myfunction(e) { 
 
      //setting your input text to the global Javascript Variable for every key press 
 
      function myfunction(e) { 
 
       var inputTextValue = e, 
 
       result = document.getElementById("total_amount").value, 
 
       sum = 0; 
 

 
       for(var i=0; i<inputTextValue.length; i++) { 
 
        var ip = inputTextValue[i]; 
 

 
        if (ip.name && ip.name.indexOf("total") < 0) { 
 
         sum += parseInt(ip.value) || 0; 
 
        } 
 

 
        // sum = parseFloat(ip) + parseFloat(result); 
 

 
       } 
 

 
       document.getElementById("total_amount").value = sum; 
 

 
      } 
 

 
      function delSpec(node) 
 
      { 
 
       r=node.parentNode.parentNode; 
 
       r.parentNode.removeChild(r); 
 
      } 
 

 
    </script> 
 
</head> 
 
<body> 
 
<input type="text" id="number" placeholder="Enter no.of rows"/> 
 
<button type="button" onclick='createTable()'>Click Me!</button> 
 
<table id="table" class="order-table table" name="table1" required> 
 
</table> 
 
<label>Sum:</label> 
 
<input type="text" id="total_amount" value="0"/> 
 
</body> 
 
</html>

事前のおかげで...

出典

2016-06-30 hikoo

'o nkeyup = "myfunction（event）" '属性を再計算したい' input'に追加します。 – Arg0n

はまた少し、すべての数量と金額を取得し、それらを合計するあなたの機能を変更：

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <style> 
 
     div { 
 
      background: red; 
 
      margin: 5px; 
 
     } 
 

 
     table { 
 
      border: 2px solid black; 
 
     } 
 

 
     td { 
 
      padding: 10px; 
 
      border: 1px solid lightgrey; 
 
     } 
 

 
    </style> 
 

 
    <script> 
 

 
      function createTable() { 
 
       var numRows = document.getElementById('number').value; 
 
       if (numRows == "") { 
 
        alert("Please enter some numeric value"); 
 
       } else { 
 
        var th = document.querySelectorAll('#table th'); 
 
        if (!th.length) { 
 
         var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>"; 
 
         var table = document.createElement('table'); 
 
         table.innerHTML = rows; 
 
         document.getElementById("table").appendChild(table.firstChild); 
 
        } 
 

 
        for (var i = 0; i < numRows; i++) { 
 
         var elems = ''; 
 
         elems += "<tr><td><input type='text' name='" + "name".concat(i + 1) + "'></td><td><input type='text' name='" + "quantity".concat(i + 1) + "'></td><td><input type='text' name='" + "qtype".concat(i + 1) + "'></td><td id='amt'><input class='amount' type='text' id='sum' onkeyup='myfunction()' name='" + "total".concat(i + 1) + "'></td><td><input type='button' class='del_img' onClick= 'delSpec(this)' value='Delete'></td></tr>"; 
 
         var table = document.createElement('table'); 
 
         table.innerHTML = elems; 
 
         document.getElementById("table").appendChild(table.firstChild); 
 
        } 
 
       } 
 
      } 
 

 
      // window.onkeyup = keyup; 
 
      //function myfunction(e) { 
 
      //setting your input text to the global Javascript Variable for every key press 
 
      function myfunction() { 
 
       var sum = 0; 
 
       var amounts = document.getElementsByClassName('amount'); 
 

 
       for(var i=0; i<amounts .length; i++) { 
 
        var a = +amounts[i].value; 
 
        sum += parseFloat(a) || 0; 
 
       } 
 

 
       document.getElementById("total_amount").value = sum; 
 
      } 
 

 
      function delSpec(node) 
 
      { 
 
       r=node.parentNode.parentNode; 
 
       r.parentNode.removeChild(r); 
 
       myfunction(); 
 
      } 
 

 
    </script> 
 
</head> 
 
<body> 
 
<input type="text" id="number" placeholder="Enter no.of rows"/> 
 
<button type="button" onclick='createTable()'>Click Me!</button> 
 
<table id="table" class="order-table table" name="table1" required> 
 
</table> 
 
<label>Sum:</label> 
 
<input type="text" id="total_amount" value="0"/> 
 
</body> 
 
</html>

出典

2016-06-30 08:36:41 Arg0n

私は数量と金額を取得したくない...金額だけを合計したい – hikoo

あなたのコードも動作していません – hikoo

私はコードを更新しました。そして、はい、それは量*量で前に働いていました。 – Arg0n

Onkeyupのみを使用して特定の列セルの値と合計値を取得する方法

答えて

関連する問題