Javascript - 在字段中添加行和總和值

我有一個帶有這個字段和按鈕的窗體，我可以添加行：book_desc []，book_pages []。 books_pages []的總和字段爲book_pages_tot。與我的javascript我想要在每個book_pages字段中添加值的行，並將這些值在book_pages_tot字段中總和有總值。Javascript - 在字段中添加行和總和值

這是腳本：形式和領域

<form method="POST" action="addpages.php" name="books" onmouseover="javascript:sum();"> 

<button type="button" onClick="addRow('dataTable')"> Add pages </button> 
    <table id="dataTable" class="form"> 
     <input type="text" class="form-control" name="book_pages[]" onblur="javascript:sum();"> 
     <input type="text" class="form-control" name="book_pages_total" onblur="javascript:sum();"> 
    </table> 
</form>

的JavaScript：

<script language="javascript"> 
    function sum() { 
     var a = parseInt(document.books.book_pages[].value); 
     var result = a +a[]; 
    document.books.tot_prestazioni_A.value = result; 
}  
</script>

這個腳本無法工作。如何對book_pages_tot字段中每個book_pages []中的值進行求和？

我希望能解釋我的問題。

感謝

來源

2017-01-20 Frankie

沒有作出任何意義，所以我重寫了整個事情。 action是一個真正的測試服務器，但由於安全限制它不會在SO中提交，但如果您自己使用它，它會提交。細節在片段中進行了評論。

代碼片段

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> 
 
    <title>00A00</title> 
 
    <style> 
 
    button, 
 
    input { 
 
     font: inherit; 
 
    } 
 
    .pages { 
 
     width: 6ch; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <form method="post" action="http://httpbin.org/post" name="books"> 
 
     <button type="button" onClick="addRow()">Add Book</button> 
 
     <table id='dataTable'> 
 
     <tbody id='dataMain'> 
 
      <tr id='original' class='row'> 
 
      <td> 
 
       <input class='book' placeholder='Enter Title'> 
 
      </td> 
 
      <td> 
 
       <input type="number" class="form-control pages" name="pages" min='1' max='9999' value='1' oninput='totalPgs();'> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     <tbody> 
 
      <tr id='dataTotal'> 
 
      <td> 
 
       <input type='submit'> 
 
      </td> 
 
      <td> 
 
       <output id='total' class="form-control" name="total"></output> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </form> 
 
    <script> 
 
    function addRow() { 
 
     // Reference the first <tr> as row 
 
     var row = document.getElementById('original'); 
 
     // Reference the first <tbody> as main 
 
     var main = document.getElementById('dataMain'); 
 
     // Clone row 
 
     var clone = row.cloneNode(true); 
 
     // Remove clone's id 
 
     clone.removeAttribute('id'); 
 
     // Clean clone of any data 
 
     clone.querySelectorAll('input').forEach(function(inp) { 
 
     inp.value = '' 
 
     }); 
 
     // Append clone as the last child of main 
 
     main.appendChild(clone); 
 
    } 
 

 
    function totalPgs() { 
 
     // Reference the <output> as out 
 
     var out = document.getElementById('total'); 
 
     // Collect all nodes with class .pages into a NodeList called pgs 
 
     var pgs = document.querySelectorAll('.pages'); 
 

 
     /* Array called arr is made by... 
 
\t || ...map.call pgs NodeList on each node called pg... 
 
\t || ...convert each pg value to a true number... 
 
\t || ...return all number values as an array called arr 
 
\t */ 
 
     var arr = Array.prototype.map.call(pgs, function(pg) { 
 
     var cnt = parseInt(pg.value, 10); 
 
     return cnt; 
 
     }); 
 
     // .apply the function sum() to array called arr 
 
     var total = sum.apply(sum, arr); 
 
     // The value of out is whatever total is 
 
     out.value = total; 
 
     // return the value of total 
 
     return total; 
 
    } 
 

 
    /* sum() will take any amount of numbers and add... 
 
    || ...them up. Works best with .apply() or .call() 
 
    || Usage: 
 
    || var totalNumber = sum.apply(sum, array); 
 
    || or 
 
    || var totalNumber = sum.call(sum, object); 
 
    */ 
 
    function sum() { 
 
     var res = 0; 
 
     var i = 0; 
 
     var qty = arguments.length; 
 
     while (i < qty) { 
 
     res += arguments[i]; 
 
     i++; 
 
     } 
 
     return res; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-01-20 02:54:14 zer00ne

感謝，這項工作很好！ – Frankie

非常歡迎，先生，非常感謝。我只是要去做下半場，但我被帶走了。 – zer00ne

使用此功能：

function sum() { 
    var inputs = document.books["book_pages[]"], 
     result = 0; 

    for(var i in inputs){ 

     var input = inputs[i], 
      val = input.value; 
     if(val !== undefined && val !== '') 
      result += parseInt(val); 
    } 
    document.books.tot_prestazioni_A.value = result; 
}

Demo

來源

2017-01-20 01:00:46 talkhabi

Javascript - 在字段中添加行和總和值

回答

相關問題