HTML 表格中的 JavaScript 计算
Posted
技术标签:
【中文标题】HTML 表格中的 JavaScript 计算【英文标题】：JavaScript Calculations within an HTML table 【发布时间】：2011-08-20 21:38:43 【问题描述】：我对 javascript 还很陌生，所以我什至不知道这是否是尝试此操作的正确语言，但我想我会尝试。我已经阅读了其他几篇文章，但我没有找到真正让我知道如何做到这一点的东西，所以我在这里问。我通读的示例都处理用户输入的数字和/或选择。但是，我要采用静态计算方式。我在 html 中将信息输入到表格中，JavaScript 计算信息并将信息输出到表格中的单元格。这是到目前为止我为表格编写的代码（我知道这并不是最好的编码方式，我正在努力，我只是遇到了这个绊脚石）：
<table>
<tr><td><font size="2"><strong>Retail Price:</strong></font></td>
<td name = "retailPrice" id="retailPrice"><font size="2"><del>$97.97</del></font></td></tr>
<tr><td><font size="2"><strong>Sale Price:</strong></font></td>
<td><font size="2"><del>$89.97</del></font></td></tr>
<tr><td><font size="3"><strong>Our Price:</strong></font></td>
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">$79.97</font></td></tr>
<tr><td><font size="2"><strong>You Save:</strong></font></td>
<td name = "yourSavings"><font font size="2" color="Red"></font></td></tr></table>
这是我能想到的唯一 javascript：
<script type="text/javascript" >
$(function()
var add = parseInt($("#retailPrice").val()) + parseInt($("#ourPrice").val());
$("yourSavings").html(add);
).keyup();
</script>
我知道我可能真的错了，但我想在寻求帮助之前我会先尝试一些工作。基本上我需要脚本来获取单元格“ourPrice”中的值并将其除以单元格“retailPrice”中的值，然后从“1”中减去总数以给出节省的百分比，然后将其输出到名为“yourSavings”的单元格”。我希望这是有道理的。所以基本上它是这样工作的：
(1-(ourPrice/retailPrice))
非常感谢任何帮助。
【问题讨论】：
【参考方案1】：val 方法适用于表单元素，您想使用text 从表格单元格中提取原始文本。然后你必须通过删除非数字前缀的东西把它变成数字解析器可以理解的东西：
function money_to_number(raw)
return parseFloat(raw.replace(/.*\$/, ''));
还请注意，在处理非整数值时，您需要 parseFloat 而不是 parseInt。而且您想减去而不是加法来节省开支。
您还需要在您定位的单元格上添加一个id，您正在使用的选择器正在寻找一个<yourSavings> 元素并且没有这样的东西：
<td name = "yourSavings" id="yourSavings">
<font font size="2" color="Red">
</font>
</td>
你会想在里面选择<font>：
$("#yourSavings font").html(savings);
所以，最终的 JavaScript 应该如下所示：
function money_to_number(raw)
return parseFloat(raw.replace(/.*\$/, ''));
var retail = money_to_number($('#retailPrice').text());
var ours = money_to_number($('#ourPrice').text());
var savings = retail - ours;
$("#yourSavings font").html(savings);
格式化savings 并将其转换为百分比留给读者作为练习。
还有一个活生生的例子：http://jsfiddle.net/ambiguous/bn7Wg/
【讨论】：
不错的正则表达式。我希望我在 RegEx 方面做得更好，这会让这样的事情变得更容易一些。为小提琴+1 ...我忘记了:( @mu 太短当我编辑我的代码以反映您建议的更改时，没有任何显示。我正在运行 Firefox 并拥有 Web 开发者插件。它是说'$ 没有定义'......我不知道为什么会这样。任何想法？脚本应该在标题中吗？目前我正在桌子前运行它。它需要在其他地方吗？ @Michael：你在引入 jQuery 库吗？您应该在文件的<head> 元素中包含类似 script type="text/javascript" src="jquery.js"></script> 的内容。
@mu 太短 这是有趣的开始，因为没有 元素。我想破坏我做这个的原因，希望有一种方法可以解决这个问题，这是一个 eBay 列表上的模板。如果我在模板中包含 标记，eBay 不会让我列出该项目。因此，我一直在寻找各种解决他们问题的方法，以允许正确和简单的设计。啊...我不知道这是否有帮助...我可以启动一个 HTML 文件，从而在 听起来您正在尝试将 Excel 编写为在浏览器中运行的 HTML 和 JavaScript。
我认为jQuery 值得学习。这是 John Resig 用于操作 DOM 的 JavaScript 框架。它是个人编写的最好的软件之一，如今所有网络开发人员都在使用它。
【讨论】：
说 jQuery 被 所有 web 开发者使用是一个笼统的概括。 如果您查看他的原始问题，看起来他正在尝试一些 jQuery。您的建议是合理的，但并非所有人都同意“所有人都使用......”【参考方案3】：我必须对您的原始代码进行一些修改，但试试这个（我去掉了格式和 $ 符号以使数学工作：
<table>
<tr><td><font size="2"><strong>Retail Price:</strong></font></td>
<td name="retailPrice" id="retailPrice">97.97</td></tr>
<tr><td><font size="2"><strong>Sale Price:</strong></font></td>
<td><font size="2"><del>$89.97</del></font></td></tr>
<tr><td><font size="3"><strong>Our Price:</strong></font></td>
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">79.97</font></td></tr>
<tr><td><font size="2"><strong>You Save:</strong></font></td>
<td name ="yourSavings" id="yourSavings"></td></tr>
</table>
var rp = $("#retailPrice").text();
var op = $("#ourPrice").text();
var add = parseFloat(rp) - parseFloat(op);
$("#yourSavings").html(add);
【讨论】：
【参考方案4】：所以听起来你有一个好的开始。您可能最需要的是从单元格中获取数值的一致且可靠的方法。在这种思路中，我肯定会鼓励的一件事是减少您正在内联执行的遗留 HTML 样式的数量。 <font> 标签等将表示与文档结构绑定得太紧密，使得数据/视图关系难以构建和维护。
所以让我们把代码清理一下，看看是否有更清晰的画面：
<style>
.title
font-size : 100%;
font-weight : bold;
.big
font-size : 120%;
.sale
text-decoration : line-through;
.our
color : red;
.savings
color : red;
</style>
<table>
<tr>
<td class="title">Retail Price:</td>
<td class="price retail" id="retailPrice">$97.97</td>
</tr>
<tr>
<td class="title">Sale Price:</td>
<td class="price sale" id="salePrice">$89.97</td>
</tr>
<tr>
<td class="big title">Our Price:</td>
<td class="price our big" id="ourPrice">$79.97</td>
</tr>
<tr>
<td class="title">You Save:</td>
<td class="savings" id="yourSavings"></td>
</tr>
</table>
啊哈，现在我们有了一个清晰的文档结构和一个很好的干净的方法来将我们的样式与我们的 HTML 分开。这样一来，我们就可以专注于数据和行为：
(function()
// put all your JavaScript in a closure so you don't pollute the global namespace
function extract_float_from_price ( price )
return parseFloat( price.replace(/\$/,'') );
function evaluate_savings ( )
var retail = extract_float_from_price( $('#retailPrice').text() ),
ours = extract_float_from_price( $('#ourPrice').text() );
$('#yourSavings').text( parseInt( ( 1 - ( ours / retail ) ) * 100 ) + '%' );
$( evaluate_savings ); // binds to Dom Ready
)()
http://jsfiddle.net/wd66b/ 包含上述代码的工作示例。
【讨论】：
以上是关于HTML 表格中的 JavaScript 计算的主要内容，如果未能解决你的问题，请参考以下文章