文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >汇总动态表最后一列javascript

问汇总动态表最后一列javascript
EN

Stack Overflow用户
提问于 2018-07-12 04:28:05
回答 2查看 82关注 0票数 0

请有人在这方面提供帮助，一切似乎都很好，但sumQTY()函数是我遇到问题的地方，它迭代通过行单元格，但就是不能识别输入框。谢谢，贝罗就是剧本。如何让sumQTY()很好地工作。

代码语言：javascript
复制
<SCRIPT language="javascript">
function addRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount < 4) { // limit the user from creating fields more than your limits
    var row = table.insertRow(rowCount);
    var colCount = table.rows[1].cells.length;
    row.id = 'row_'+rowCount;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.outerHTML = table.rows[1].cells[i].outerHTML;            
    }
    var listitems= row.getElementsByTagName("input")
    for (i=0; i<listitems.length; i++) {
        listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
    }
} else {
        alert("Maximum Row Reached.");
}
}
function deleteRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for (var i = 1; i < rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if (null !== chkbox && true === chkbox.checked) {
        if (rowCount <= 2) { // limit the user from removing all the fields
            alert("Cannot Remove all the Rows.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}
}
function calculate(elementID) {
var mainRow = document.getElementById(elementID);
var myBox1 = mainRow.querySelectorAll('[id=item')[0].value;
var myBox2 = mainRow.querySelectorAll('[id=price')[0].value;
var total = mainRow.querySelectorAll('[id=qty')[0];
var myResult1 = myBox1 * (parseFloat(myBox2)) ;
var mresult = myResult1.toFixed(2);                          
total.value = mresult;
}
function sumQty(dataTable) {
var total = 0;
var confirm = 10;
var colCount;
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for (var i = 1; i < rowCount; i++) {
    var row = table.rows[i];
    colCount = row.cells.length;
    for (var j = 0; j < colCount; j++) {
        var node = row.cells[j].childNodes[0];
        if (node.name == "qty[]") {
            total += parseInt(node.value);
            confirm = confirm + 1;
        }else{confirm = confirm - 1;}
    }
}
 //alert("total = " + total + " " + rowCount + " " + colCount + " " + confirm);
//document.getElementById("mee").innerHTML = "Sum Value = " + total;
//console.log(sumVal);
return total;
}
</SCRIPT>

下面是html表的代码。

代码语言：javascript
复制
<form action="" method="post" name="f">  

<table id="dataTable" class="form">
<thead>
    <th style="width:20px"></th>
    <th>Item</th>
    <th>Description</th>
<th>Unit Price</th>
<th>Item Units</th>
<th>Total Price (#)</th>
</thead>
<tbody>
    <tr id='row_0'>
            <td><input style="width:20px" type="checkbox" name="chkbox[]" /></td>
        <td>
                <input type="text" required="required" name="ite[]" onChange="search('row_1')" id="ite" placeholder="Item">
            </td>
            <td>
                <input type="text" required="required" class="small" name="price[]" id="des" placeholder="Description">
            </td>
            <td>
                <input type="text" required="required" name="item[]" oninput="calculate('row_0')" onchange="sumQty()" id="item" placeholder="unit price">
            </td>
            <td>
                <input type="text" required="required" class="small" name="price[]" oninput="calculate('row_0')" id="price" placeholder="units">
            </td>
            <td>
                <input type="text" required="required" class="small" name="qty[]" id="qty" placeholder="total price">
            </td>

    </tr>
</tbody>
</table>
<span id="mee"></span>
            <input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<INPUT type="submit" value="Insert" name="submit" />
<input type="text" required="required" class="small" name="sumtotal" placeholder="total price"/>
</form>

我想用name="sumtotal“在输入字段中输出最后一列的总和。

谢谢。

javascript
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-12 05:40:00

您将不得不在何时调用价格方面做更多的工作，因为当它被调用时，由于没有给定的数量，所以当它被调用时，sumQTy = NaN，您可以通过在calculate函数中做一个小的更改或在数量中具有一个起始值o "1“来覆盖该行为。

以下是我为使其正常工作所做的更改：

在您的HTML <input type="text" required="required" class="small" name="price[]" oninput="calculate('row_0')" id="price" placeholder="units" value="1">中

在calculate函数中

代码语言：javascript
复制
 var multiplier = Number(myBox2) || 1;
 var myResult1 = myBox1 * multiplier;

更好地实现sumQty

代码语言：javascript
复制
 function sumQty(dataTable) {
 var confirm = 10;
  var colCount;
  var table = document.getElementById("dataTable");
  let rows = [...table.querySelectorAll('[name*=qty]')];

  let total = rows.reduce((prev, current)=>{
    let to_be_added = Number(current.value) || 0;
    return prev + to_be_added;
  },0)

  return total;
}
票数 0
EN

Stack Overflow用户

发布于 2018-07-12 18:19:28

代码语言：javascript
复制
<SCRIPT language="javascript">
function addRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount < 4) { // limit the user from creating fields more than your limits
    var row = table.insertRow(rowCount);
    var colCount = table.rows[1].cells.length;
    row.id = 'row_'+rowCount;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.outerHTML = table.rows[1].cells[i].outerHTML;            
    }
    var listitems= row.getElementsByTagName("input")
    for (i=0; i<listitems.length; i++) {
        listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
    }
} else {
        alert("Maximum Row Reached.");
}
}
function deleteRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for (var i = 1; i < rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if (null !== chkbox && true === chkbox.checked) {
        if (rowCount <= 2) { // limit the user from removing all the fields
            alert("Cannot Remove all the Rows.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}
}
function calculate(elementID) {
var mainRow = document.getElementById(elementID);
var myBox1 = mainRow.querySelectorAll('[id=item')[0].value;
var myBox2 = mainRow.querySelectorAll('[id=price')[0].value;
var total = mainRow.querySelectorAll('[id=qty')[0];
var multiplier = Number(myBox2) || 1;
var myResult1 = myBox1 * multiplier;
//var myResult1 = myBox1 * (parseFloat(myBox2)) ;
var mresult = myResult1.toFixed(2);                          
total.value = mresult;
//function sumQty(dataTable) {
var confirm = 10;
var colCount;
var table = document.getElementById("dataTable");
let rows = [...table.querySelectorAll('[name*=qty]')];
let total2 = rows.reduce((prev, current)=>{
    let to_be_added = Number(current.value) || 0;
    return prev + to_be_added;
},0)
console.log(total2);
$("#sumtotal").val(total2.toFixed(2));
return total2;
}
function amountDue() {
var amount =  parseFloat($("#sumtotal").val());
var paidd =   parseFloat($("#paid").val());
var balance =  amount - paidd;
$("#due").val(balance.toFixed(2));
$("#due2").val(balance.toFixed(2));
}

html代码！

代码语言：javascript
复制
<form action="" method="post">
<article>
<div>
    <address>
            <p>Customer ID=<br>Staff ID= <?php echo $_SESSION['staffid']?></p>
        </address>
        <table class="meta">
            <tr>
                <th><span>invoice #</span></th>
                <td><input type="text" name="ind"/></td>
            </tr>
            <tr>
                <th><span>Amount Due</span></th>
                <td><input type="text" required="required" class="small" name="" id="due2" placeholder="#" readonly="readonly" style="background-color: white" /></td>
            </tr>
        </table>
</div>
</article>
<article>
<table id="dataTable" class="form">
<thead>
<th style="width:20px"></th>
<th>Item</th>
<th>Description</th>
<th>Unit Price</th>
<th>Item Units</th>
<th>Sub Total (#)</th>
</thead>
<tbody>
    <tr id='row_0'>
        <td><input style="width:20px" type="checkbox" name="chkbox[]" /></td>
        <td>
                <select required="required" name="" onChange="" id="" placeholder="Item">
                    <option value="0"> select an item</option>
                    <option value="1"></option>
                    <option value="2"></option>
            </select>
        </td>
        <td>
                <input type="text" required="required" class="small" name="" id="" placeholder="Description">
        </td>
        <td>
                <input type="text" required="required" name="item[]" oninput="calculate('row_0')" id="item" placeholder="unit price">
        </td>
    <td>
                <input type="text" required="required" class="small" name="price[]" oninput="calculate('row_0')" id="price" placeholder="units" value="1">
        </td>
        <td>
                <input type="text" required="required" class="small" name="qty[]" id="qty" placeholder="sub total" readonly="readonly" style="background-color: white">
        </td>

    </tr>
</tbody>
</table>
<span id="mee"></span>
            <input type="button" value="Add" onClick="addRow('dataTable')" class="butto" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" class="butto"/>

<table class="balance" id="datatable2">
        <tr>
            <th><span>Total</span></th>
            <td><input type="text" required="required" class="small" name="tot" id="sumtotal" placeholder="total price" readonly="readonly" style="background-color: white"/></td>
            </tr>
            <tr>
            <th><span>Amount Paid</span></th>
            <td><input type="text" required="required" class="small" name="" id="paid" placeholder="#" oninput="amountDue()"></td>
            </tr>
            <tr>
            <th><span>Balance Due</span></th>
            <td><input type="text" required="required" class="small" name="" id="due" placeholder="#" readonly="readonly" style="background-color: white"></td>
            </tr>
        </table>

    </article>
    <aside><center>
        <h1><span>Additional Notes</span></h1>
        </center>
        <div contenteditable>
            <p>Enter additional info here</p>
        </div>
    </aside>            
</ul>

     <ul id="core" class="hide" style="overflow-x:auto; overflow-y:auto;">
                 </ul>

             <ul id="jquerytuts" class="hide" style="overflow-x:auto; overflow-y:auto;">

             </ul>

             <ul id="classics" class="hide">

             </ul>

         </div> <!-- END List Wrap -->
                <center>
                <div class="input-container">
                <INPUT type="submit" value="Insert" name="submit" class="butto" style="width:100%"/>
            </div>

            </form>
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51293728

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档