谁能告诉我如何使用 javascript/jquery 将其放入三列表中？
这是我的代码。
var products = ["Echo Dot", "Echo Plus", "Echo Auto", "Echo Show", "Echo Link"];
var prices = [49.99, 69.99, 129.99, 229.99, 1099.99];
toDisplay = "";
total = 0;
for (var i = 0; i < products.length; i++) {
toDisplay += "<li>" + products[i] + " - " + prices[i] + "</li>";
total += prices[i];
}
document.getElementById('prices').innerHTML = toDisplay;
<ol id="prices">
</ol>
皈依舞浏览 131回答 2
2回答
-
慕侠2389804
使用一个<table>元素。<table>元素有一个名为 的方法insertRow，该方法将新行添加到表中，并且行元素<tr>有一个名为 的方法insertCell，该方法将新单元格添加到行元素。我们将使用这两个方法将数据添加到表中，而不是累积 html 字符串，如下所示：var products = ["Echo Dot", "Echo Plus", "Echo Auto", "Echo Show", "Echo Link"];var prices = [49.99, 69.99, 129.99, 229.99, 1099.99];var discountPercent = 20;var table = document.getElementById("the-table");for (var i = 0; i < products.length; i++) { var row = table.insertRow(); row.insertCell().textContent = products[i]; row.insertCell().textContent = prices[i]; row.insertCell().textContent = ((100 - discountPercent) * prices[i] / 100).toFixed(2);}table { border-collapse: collapse;}table td, table th { border: 1px solid black; padding: 5px 10px;}<table id="the-table"> <thead> <tr> <th>Product</th> <th>Price</th> <th>Price After 20% Discount</th> </tr> </thead></table>我曾经textContent设置新添加的单元格的文本，而不是设置innerHTML可能会出现一些问题。 -
手掌心
试试这个代码：<body> <table id="prices"></table> <script> var title = ["Product", "Price", "Discount"]; var products = [ "Echo Dot", "Echo Plus", "Echo Auto", "Echo Show", "Echo Link", ]; var prices = [49.99, 69.99, 129.99, 229.99, 1099.99]; var discount = prices.map(myFunction); function myFunction(value) { return ((value * 80) / 100).toFixed(2); } var toDisplay = ""; var t = ""; var i = 0; for (; i < products.length; i++) { if (i < title.length) { t += "<th>" + title[i] + "</th>"; } toDisplay += "<tr>" + "<td>" + products[i] + "</td>" + "<td>" + prices[i] + "</td>" + "<td>" + discount[i] + "</td>" + "</tr>"; } t = "<tr>" + t + "</tr>" + toDisplay; document.getElementById("prices").innerHTML = t; </script> </body>
随时随地看视频慕课网APP
相关分类
JavaScript