如何在JavaScript和其他表中显示特定数量的表列？
如何在JavaScript和其他表中显示特定数量的表列？
提问于 2013-11-27 05:57:54
我有一份汽车清单：
cars = [
{model: "BMW", count: 23, details: "<p>I like <b>X6</b> from Germany</p>"},
{model: "Hyundai", count: 30, details: "<p>I have <b>Verna</b> from Korea</p>"},
{model: "Toyota", count: 08, details: "<p>Small <b>Yaris</b> from Japan</p>"},
{model: "Fiat", count: 12, details: "<p>Latest <b>500c</b> from Italy</p>"}
]我想做的是：
- 列表应该始终显示在三列布局中，例如，在总共只有四种模型的情况下。
- 列表应按字母顺序排列。
- 点击每辆车，模型应该显示关于汽车的附加信息(一些html)，如上面所列。
- 名单上的汽车数量在任何时候都可能有所不同。
当我学习JS的时候，我正试着把我的注意力集中在这些需求上。为了正确学习，我喜欢了解每一步的思考过程。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-27 08:30:51
下面是一个可以解决您的需求的示例：
1)正如我在注释中提到的，有一个包含三列的html表。
2)按车型名称对汽车进行排序。
3)当模型被点击时，会显示关于汽车的附加信息。(在这种情况下，在警报窗口中)
4)您可以使用表单将cars添加到列表中，然后重新生成该表。
在这里运行代码。
<html>
<head>
<title>Just for fun</title>
</head>
<body>
<h3>Cars and types:</h3>
<form name="myForm" onsubmit="return mysubmit()">
Model: <input type="text" name="model"><br>
Count: <input type="text" name="count"><br>
Details: <input type="text" name="details"><br>
<input type="submit" value="Submit">
</form>
<button onclick="generate_table()">Generate Table</button><br>
<table class="cars">
</table>
<div class="details" style="float:right;">
</div>
<script>
console.log('script started');
var cars = [
{model: "BMW", count: 23, details: "<p>I like <b>X6</b> from Germany</p>"},
{model: "Hyundai", count: 30, details: "<p>I have <b>Verna</b> from Korea</p>"},
{model: "Toyota", count: 08, details: "<p>Small <b>Yaris</b> from Japan</p>"},
{model: "Fiat", count: 12, details: "<p>Latest <b>500c</b> from Italy</p>"}
]
var types = ["model","count","details"];
function generate_table() {
cars.sort(compare);
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.getElementsByClassName("cars")[0];
tbl.innerHTML = '';
var tblBody = document.createElement("tbody");
console.log(cars.length);
for (var i = 0; i < 3; i++) {
var index = ((j*3)+i);
if (index < cars.length) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");
var num = index;
cell.innerHTML = '<a href="#" onclick="showDetailsAsDiv('+num.toString()+')">' + cars[index][types[0]] + '</a> (' + cars[index][types[1]] + ')';
row.appendChild(cell);
}
}
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("border", "2");
}
// This function throws details into 'details' div
function showDetails(num) {
console.log('details showing',num);
div = document.getElementsByClassName('details')[0];
div.innerHTML = '';
var car = cars[num];
div.innerHTML = 'Model: ' + car.model + '</br>Count: ' + car.count +
'</br>Details:\t' + car.details;
}
function mysubmit() {
var model = document.forms["myForm"]["model"].value
var count = document.forms["myForm"]["count"].value
var details = document.forms["myForm"]["details"].value
cars.push({
model:model,
count:count,
details:details
});
generate_table();
return false;
}
function compare(a,b) {
if (a.model < b.model)
return -1;
if (a.model > b.model)
return 1;
return 0;
}
</script>
</body>
</html>编辑：更改了代码，将细节抛到div中而不是警告框中--这样您就可以看到运行的HTML了。
EDIT2:在3列中显示汽车。
参考文献：
表函数微修改
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20234978
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号