Javascript更新HTML单元格
我是Javascript新手，已经修改了一些免费代码，但是我一直在添加额外的功能。。。希望有人能填补最后的空白 顶部的物业销售表将正确更新为“总销售额”，并自动更新为页面顶部和底部的“应付佣金”，但是我添加了一个“成本”表，希望这些成本的总和自动填充底部的“总成本”框，并使“应付佣金”框自动将其考虑在内 这是页面的外观： 这是javascript的“更新发票”部分：Javascript更新HTML单元格,javascript,html,cells,Javascript,Html,Cells,我是Javascript新手，已经修改了一些免费代码，但是我一直在添加额外的功能。。。希望有人能填补最后的空白 顶部的物业销售表将正确更新为“总销售额”，并自动更新为页面顶部和底部的“应付佣金”，但是我添加了一个“成本”表，希望这些成本的总和自动填充底部的“总成本”框，并使“应付佣金”框自动将其考虑在内 这是页面的外观： 这是javascript的“更新发票”部分： /* Update Invoice /* ===========================================
/* 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]));
}
<!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> </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> </span></td>
<td><span contenteditable> </span></td>
<td><span data-prefix>$</span><span> </span</td>
<td><span data-prefix>$</span><span> </span</td>
<td><span data-prefix>$</span><span> </span</td>
<td><span contenteditable> </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> </span></td>
<td><span contenteditable> </span></td>
<td><span> </span></td>
<td><span> </span></td>
<td><span data-prefix>$</span><span contenteditable> </span></td>
<td><span contenteditable> </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> </span></td>
</tr>
<tr>
<th><span>Total Costs</span></th>
<td><span data-prefix>$</span><span> </span></td>
</tr>
<tr>
<th><span>Commission Payable</span></th>
<td><span data-prefix>$</span><span> </span></td>
</tr>
</table>
</article>
<aside>
<div contenteditable>
<p>Thank you.</p>
</div>
</aside>
</body>
</html>
发票联
发票联
公司名称
收件人
接收公司
发票#
2015-09
日期
2015年9月
应付佣金
$
出售物业
财产
价格
比率
粗俗的
净额
分裂
稳定的
-添加属性地址
$
$您使用的变量（成本
）未在任何地方定义/初始化。因此，当您进入代码的这一部分时：
// set costs total
cells[5].innerHTML = costs;
您将得到一个错误：
未捕获的引用错误：未定义成本
定义并初始化变量costs
后，代码的其余部分似乎工作正常
例如，我将其与其他变量一起初始化为零（尽管您可能希望使用不同的值），然后我没有收到任何错误，执行的代码完全更新了所有数字：
var total = 0;
var totalcosts = 0;
var cells, price, total, totalcosts, a, i;
var costs = 0;
注意：我创建了自己版本的函数parseFloatHTML（）
和parsePrice（）
。如果定义成本后代码仍然不起作用，则应检查JavaScript控制台，以查看这两个成本中是否有任何一个发生错误。您使用的变量（成本
）未在任何位置定义/初始化。因此，当您进入代码的这一部分时：
// set costs total
cells[5].innerHTML = costs;
您将得到一个错误：
未捕获的引用错误：未定义成本
定义并初始化变量costs
后，代码的其余部分似乎工作正常
例如，我将其与其他变量一起初始化为零（尽管您可能希望使用不同的值），然后我没有收到任何错误，执行的代码完全更新了所有数字：
var total = 0;
var totalcosts = 0;
var cells, price, total, totalcosts, a, i;
var costs = 0;
注意：我创建了自己版本的函数parseFloatHTML（）
和parsePrice（）
。如果定义了costs
之后代码仍然无法工作，那么您应该检查JavaScript控制台，看看这两个控制台中是否有任何错误发生。如果没有任何HTML，很难看到是否有包含类的表，包括“costs”以及代码所依赖的所有相关跨度和内容，请展示你的HTML代码。一把小提琴会更好。我现在已经在帖子中添加了HTML，谢谢你的评论。虽然没有任何HTML，很难看到是否有一个包含“成本”以及代码所依赖的所有相关跨度和内容的表，请展示你的HTML代码。一把小提琴会更好。我现在已经在帖子中添加了HTML，谢谢你的评论。建议：使用JavaScript控制台（你可以在大多数浏览器中使用F12打开它）。这种类型的错误很容易通过这种方式捕捉到。嗨，我尝试过这种方法，但是有一次我设置了'var costs=0；'那么“新成本”行的成本部分就不能从$0更改。在第一个“已售出”表中使用了相同的方法，即声明“cells[5]。innerHTML=split50；”然后使总数+=split50，其中split50在之前的任何地方都没有定义，但是这一个有效吗？我尝试了javascript控制台，但没有出现任何错误……这与split50
的情况不同，因为您在使用它之前就给了它一个值：split50=parseFloatHTML（cells[4]）/2（它被定义为一个全局变量）。您不会将任何值分配给成本
，然后在分配中使用它。请创建并共享链接，我将查看是否看到其他内容。非常感谢您的帮助，非常感谢，您可以在此处查看页面：jarahproperty.comoj.com唯一不能正常工作的部分是成本$amount，因为var成本=0，因此无法编辑；（所有新增成本的）合计金额需要在“总成本”下合计，然后从“总销售额”中扣除该金额，形成应付总额……建议使用JavaScript控制台（在大多数浏览器中，您可以使用F12打开它）。这种类型的错误很容易通过这种方式捕捉到。嗨，我尝试过这种方法，但是有一次我设置了'var costs=0；'那么“新成本”行的成本部分就不能从$0更改。在第一个“已售出”表中使用了相同的方法，即声明“cells[5]。innerHTML=split50；”然后使总数+=split50，其中split50在之前的任何地方都没有定义，但是这一个有效吗？我尝试了javascript控制台，但没有出现任何错误……这与split50
的情况不同，因为您在使用它之前就给了它一个值：split50=parseFloatHTML（cells[4]）/2（它被定义为一个全局变量