Question

我对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))

非常感谢任何帮助。

Answer 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/

Answer 2

听起来您正在尝试将Excel编写为在浏览器中运行的HTML和JavaScript。

我认为jQuery值得学习。它是John Resig操纵DOM的JavaScript框架。它是个人编写的最好的软件之一，今天所有的Web开发人员都在使用它。

Answer 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);

Answer 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计算

4 个答案: