Question

我尝试在将这些不断更新的值插入HTML表格之前，先购买大量产品并将其乘以价格。为了这个例子，我正在使用永远的循环来不断地输入。

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">

<script>
<!--
var product1 = 0;
var product2 = 0;
var product3 = 0;
var product4 = 0;
var product5 = 0;
var productNum = 0;
var productNumInt = 0;
var quantitySold = 0;
var quantitySoldInt = 0;

document.write("<table>");
document.write("<tr><th>Product Number</th><th>Quantity Sold</th></tr>");
document.write("<tr><td>1</td><td>$" + product1 + "</td></tr>");
document.write("<tr><td>2</td><td>$" + product2 + "</td></tr>");
document.write("<tr><td>3</td><td>$" + product3 + "</td></tr>");
document.write("<tr><td>4</td><td>$" + product4 + "</td></tr>");
document.write("<tr><td>5</td><td>$" + product5 + "</td></tr>");
document.write("</table>");

while (true) {
  productNum = window.prompt("Please enter the product number");
  quantitySold = window.prompt("Please enter the quantity sold");
  productNumInt = parseInt(productNum);
  quantitySoldInt = parseInt(quantitySold);

  switch (productNumInt) {
    case 1:
      product1 += quantitySoldInt * 2.98;
      break;
    case 2:
      product2 += quantitySoldInt * 4.50;
      break;
    case 3:
      product3 += quantitySoldInt * 9.98;
      break;
    case 4:
      product4 += quantitySoldInt * 4.49;
      break;
    case 5:
      product5 += quantitySoldInt * 6.87;
      break;
  }
}
// -->
</script>
</head>

<body>
</body>

</html>

Answer 1

如上所述@ vZ10，您需要将脚本放在body标记的末尾。此外，您还提示用户在实际呈现表格后填写数据（document.write调用）。尝试在提示

后发出document.write来电

Answer 2

首先，您不需要document.write这一部分：

document.write("<table>");
document.write("<tr><th>Product Number</th><th>Quantity Sold</th></tr>");

事实上，在您的情况下，您根本不需要使用document.write，在没有必要的情况下可以更加健康。

通过将此标记作为基本模型，您可以减轻一些痛苦：

<强> HTML

<table>
   <tr><th>Product Number</th><th>Quantity Sold</th></tr>
   <tr><td>1</td><td id="product1"></td></tr>
   <tr><td>2</td><td id="product2"></td></tr>
   <tr><td>3</td><td id="product3"></td></tr>
   <tr><td>4</td><td id="product4"></td></tr>
   <tr><td>5</td><td id="product5"></td></tr>
</table>

然后，您可以使用类似的东西访问您的字段（脚本位于正文的末尾，或者至少在表标记之后）：

<强>的JavaScript

document.getElementById("product1").innerHTML = "1.00";
document.getElementById("product2").innerHTML = "2.00";
document.getElementById("product3").innerHTML = "3.00";
document.getElementById("product4").innerHTML = "4.00";
document.getElementById("product5").innerHTML = "5.00";

更好的是，您可以创建一个DOM（文档对象模型）文本元素并对其进行更新（请参阅DOM reference）：

var product1_text = document.createTextNode("1.00");
document.getElementById("product1").appendChild(product1_text);

// now you can update the value
product1_text.textContent = "1.50"; // calculated value

我会让你考虑用文本单元格计算的问题。使用当前脚本，您将在字符串上遇到operator + =的问题。请记住，当您获得显示的数字时，您将使用字符串而不是其所代表的基数10。您将需要函数parseFloat(stringValue)来实现这一目标。

我希望这有帮助并祝你好运。

Answer 3

我认为你应该把你的脚本放在身体的尽头。现在它会在您的页面出现在屏幕上之前运行。

Answer 4

您必须在<body>标记结束后写入脚本，即</body>之后。

为什么Javascript动态HTML5表没有出现在页面上

4 个答案: