个人中心
gpt4 book ai didi

Javascript 更新 HTML 单元格

转载 作者：行者123 更新时间：2023-11-28 07:05:09 25 4
gpt4 key购买 nike

我是 Javascript 新手，已经修改了一些免费代码，但在添加额外的功能时遇到了困难......希望有人可以填补最后的空白。

房地产销售的顶部表格会正确更新为“总销售额”，并自动更新为页面顶部和底部的“应付佣金”，但我添加了一个“成本”表并希望计算这些成本的总计自动填充底部的“总成本”框，并使应付佣金框自动将其计入...

页面如下所示: http://tinypic.com/r/iqj6dj/8

这是 JavaScript 的“更新发票”部分:

/* Update Invoice
/* ========================================================================== */

function updateInvoice() {
var total = 0;
var totalcosts = 0;
var cells, price, total, totalcosts, a, i;

// update inventory cells
// ======================

for (var a = document.querySelectorAll('table.inventory tbody tr'), i = 0; a[i]; ++i) {

    // get inventory row cells
    cells = a[i].querySelectorAll('span:last-child');

    // set gross as cell[2] * cell[3]
    gross = parseFloatHTML(cells[1]) * parseFloatHTML(cells[2]) / 100;

    // set gross total
    cells[3].innerHTML = gross;

    // set nett total as gross - gst - franchise
    nett = parseFloatHTML(cells[3]) /11 * 10;

    // set nett total
    cells[4].innerHTML = nett;

    // set split total as 50%
    split50 = parseFloatHTML(cells[4]) / 2;

    // set split total
    cells[5].innerHTML = split50;

    // add price to total
    total += split50;

}

for (var a = document.querySelectorAll('table.costs tbody tr'), i = 0; a[i]; ++i) {

    // get inventory row cells
    cells = a[i].querySelectorAll('span:last-child');

    // set costs total
    cells[5].innerHTML = costs;

    // add costs to totalcosts
    totalcosts += costs;

}

// update balance cells
// ====================

// get balance cells
cells = document.querySelectorAll('table.balance td:last-child span:last-child');

// set totalsales
cells[0].innerHTML = total;

// set balance and meta balance
cells[2].innerHTML = document.querySelector('table.meta tr:last-child td:last-child span:last-child').innerHTML = parsePrice(total - parseFloatHTML(cells[1]));

// update prefix formatting
// ========================

var prefix = document.querySelector('#prefix').innerHTML;
for (a = document.querySelectorAll('[data-prefix]'), i = 0; a[i]; ++i) a[i].innerHTML = prefix;


// update price formatting
// =======================

for (a = document.querySelectorAll('span[data-prefix] + span'), i = 0; a[i]; ++i) if (document.activeElement != a[i]) a[i].innerHTML = parsePrice(parseFloatHTML(a[i]));

}

关于 table.costs 的第二个变量破坏了功能并且显然是错误的。任何帮助表示赞赏。

为了回答评论，很抱歉没有首先提供 HTML，如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Invoice</title>
    <link rel="stylesheet" href="style.css">
    <link rel="license" href="http://www.opensource.org/licenses/mit-license/">
    <script src="script.js"></script>
</head>
<body>
    <header>
        <h1>Invoice</h1>
        <address contenteditable>
            <p>Company Name</p>
        </address>
        <span><img alt="Company Logo" src="company_logo.gif"><input type="file" accept="image/*"></span>
    </header>
    <article>
        <h1>Recipient</h1>
        <address contenteditable>
            <p>Recipient Company</p>
        </address>
        <table class="meta">
            <tr>
                <th><span>Invoice #</span></th>
                <td><span contenteditable>2015-09</span></td>
            </tr>
            <tr>
                <th><span>Date</span></th>
                <td><span contenteditable>September 2015</span></td>
            </tr>
            <tr>
                <th><span>Commission Payable</span></th>
                <td><span id="prefix">$</span><span>&nbsp;</span></td>
            </tr>
        </table>
        <table class="salesheader">
            <tr>
                <th style="background-color:#DBF0BE;"><span contenteditable>Properties Sold</span></th>
            </tr>
        </table>
        <table class="inventory">
            <thead>
                <tr>
                    <th width="210px"><span>Property</span></th>
                    <th width="90px"><span>Price</span></th>
                    <th><span>Rate</span></th>
                    <th><span>Gross</span></th>
                    <th><span>Nett</span></th>
                    <th><span>Split</span></th>
                    <th><span>Settled</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a class="cut">-</a><span contenteditable>Add Property Address</span></td>
                    <td><span data-prefix>$</span><span contenteditable>&nbsp;</span></td>
                    <td><span contenteditable>&nbsp;</span></td>
                    <td><span data-prefix>$</span><span>&nbsp;</span</td>
                    <td><span data-prefix>$</span><span>&nbsp;</span</td>
                    <td><span data-prefix>$</span><span>&nbsp;</span</td>
                    <td><span contenteditable>&nbsp;</span></td>
                </tr>
            </tbody>
        </table>
        <a class="add">+</a>
        <Br>
        <table class="salesheader">
            <tr>
                <th style="background-color:#F3D0DC;"><span contenteditable>Costs</span></th>
            </tr>
        </table>
        <table class="costs">
            <thead>
                <tr>
                    <th width="210px"><span>Property</span></th>
                    <th width="90px"><span>Type</span></th>
                    <th><span>Size</span></th>
                    <th><span>Qty</span></th>
                    <th><span>Nett</span></th>
                    <th><span>Cost</span></th>
                    <th><span>Date</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a class="cut">-</a><span contenteditable>Add Cost</span></td>
                    <td><span contenteditable>&nbsp;</span></td>
                    <td><span contenteditable>&nbsp;</span></td>
                    <td><span>&nbsp;</span></td>
                    <td><span>&nbsp;</span></td>
                    <td><span data-prefix>$</span><span contenteditable>&nbsp;</span></td>
                    <td><span contenteditable>&nbsp;</span></td>
                </tr>
            </tbody>
        </table>
        <a class="addcosts">+</a>
        <table class="balance">
            <tr>
                <th><span>Total Sales</span></th>
                <td><span data-prefix>$</span><span>&nbsp;</span></td>
            </tr>
            <tr>
                <th><span>Total Costs</span></th>
                <td><span data-prefix>$</span><span>&nbsp;</span></td>
            </tr>
            <tr>
                <th><span>Commission Payable</span></th>
                <td><span data-prefix>$</span><span>&nbsp;</span></td>
            </tr>
        </table>
    </article>
    <aside>
        <div contenteditable>
            <p>Thank you.</p>
        </div>
    </aside>
</body>
</html>

最佳答案

您使用的变量(costs)未在任何地方定义/初始化。因此，当您到达这部分代码时:

// set costs total
cells[5].innerHTML = costs;

您收到错误:

Uncaught ReferenceError: costs is not defined

定义并初始化变量costs后，代码的其余部分似乎工作正常。

例如，我将其与其余变量一起初始化为零(尽管您可能想使用不同的值)，然后我没有收到任何错误，并且执行的代码完全更新了所有数字:

var total = 0;
var totalcosts = 0;
var cells, price, total, totalcosts, a, i;
var costs = 0;
<小时/>

注意:我创建了自己版本的函数 parseFloatHTML() 和 parsePrice()。如果定义 costs 后代码仍然无法工作，您应该检查 JavaScript 控制台，看看这两者中是否存在任何错误。

关于Javascript 更新 HTML 单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31771241/

25 4 0
文章推荐： ios - 如何从 UIAlert 中分离并传递信息
文章推荐： c++ - Win32 C++ Alphablend 位图部分透明
文章推荐： ios - 新的 EventKit EKCalendar 不会创建？
文章推荐： javascript - 如何使 bootstrap nav-pills 在点击时关闭？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com