如何在JavaScript和其他语言中显示表的特定列数？_Javascript_Jquery_Html

如何在JavaScript和其他语言中显示表的特定列数？

javascript jquery html

如何在JavaScript和其他语言中显示表的特定列数？,javascript,jquery,html,Javascript,Jquery,Html,我有一份汽车清单： cars = [ {model: "BMW", count: 23, details: "I like X6 from Germany"}, {model: "Hyundai", count: 30, details: "I have Verna from Korea"}, {model: "Toyot

我有一份汽车清单：

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>"}
]

cars=[
{型号：“宝马”，计数：23，细节：“我喜欢德国的X6”，
{车型：“现代”，计数：30，细节：“我有来自韩国的Verna”，
{车型：“丰田”，计数：08，详细信息：来自日本的小型雅丽车“}，
{车型：“菲亚特”，计数：12，细节：“意大利最新500c”}
]

我想做的是：

该列表应始终以三列布局显示，同样在的情况下，例如例如，总共只有四种型号
列表应按字母顺序排列
点击每辆车，模型应该显示关于该车的附加信息（一些html），如上面所列
列表中的汽车数量随时可能变化

在学习JS时，我试图了解这些需求。我喜欢了解每个步骤的思考过程，以便正确学习

以下是一个可能解决您的需求的示例：

1）正如我在评论中提到的，有一个包含三列的html表

2）按车型名称对汽车进行分类

3）单击模型时，将显示有关汽车的其他信息。（在这种情况下，在警报窗口中）

4）您可以使用表单将汽车添加到列表中，然后重新生成表格


只是为了好玩
车辆和类型：
型号：

计数：

详细信息：

生成表

log（“脚本已启动”）；
var cars=[
{型号：“宝马”，计数：23，细节：“我喜欢德国的X6”，
{车型：“现代”，计数：30，细节：“我有来自韩国的Verna”，
{车型：“丰田”，计数：08，详细信息：来自日本的小型雅丽车“}，
{车型：“菲亚特”，计数：12，细节：“意大利最新500c”}
]
变量类型=[“模型”、“计数”、“详细信息”]；
函数生成_表（）{
汽车。分类（比较）；
var body=document.getElementsByTagName（“body”）[0]；
//创建一个元素和一个元素
var tbl=document.getElementsByClassName（“cars”）[0]；
tbl.innerHTML=''；
var tblBody=document.createElement（“tbody”）；
控制台。日志（车辆。长度）；
对于（变量i=0；i<3；i++）{
var指数=（（j*3）+i）；
if（索引<车辆长度）{
//创建元素和文本节点，使文本
//节点的内容，并将
//表行的末尾
var cell=document.createElement（“td”）；
var num=指数；
cell.innerHTML='（'+cars[index][types[1]]+'）；
子行（单元格）；
}
}
tbl.附肢儿童（tblBody）；
附肢儿童（tbl）；
tbl.setAttribute（“边界”、“2”）；
}
//此函数将详细信息放入“details”div
函数showDetails（num）{
log（'显示详细信息'，num）；
div=document.getElementsByClassName（'details'）[0]；
div.innerHTML=''；
var car=cars[num]；
div.innerHTML='Model:'+car.Model+'
Count:'+car.Count+
'
详细信息：\t'+car.Details；
}
函数mysubmit（）{
var model=document.forms[“myForm”][“model”].value
var count=document.forms[“myForm”][“count”].value
var details=document.forms[“myForm”][“details”].value
汽车。推({
模型：模型，
伯爵：伯爵，
详情：详情
});
生成_表（）；
返回false；
}
功能比较（a、b）{
如果（a型b.模型）
返回1；
返回0；
}

编辑：更改代码，将详细信息放入div而不是警报框-这样您可以看到正在运行的HTML

EDIT2:在3列中显示汽车

参考资料：

[略微修改]

到目前为止，您尝试了什么？网上有帮助，例如。我不是赞同这篇文章，只是指出它可能会有所帮助。@RobG，谢谢你的评论/帮助。正如我提到的，我想更多地理解“需求的解释和含义”的思维过程，更多地解决任务。例如，最后2个req。我不清楚，这就是我问这个问题的原因。基本上，听起来你在寻找一个html表格来显示汽车的类型。表中的每个元素都应该是一些可单击的项目，单击这些项目时，将显示该车辆的其余信息。这就是我要开始的地方——只是分析关于最后一个的问题，这个数字怎么可能在任何时候都是可变的/变化的？这就是大多数javascript最有可能出现的地方。你可以有一些

标签和一个Submit

——点击后，调用一个函数，将下一个汽车信息添加到“汽车”列表中，并生成表中的下一项。在RobG的评论和你的评论之后，我开始在HTML端工作，我几乎到了这里，仍然在搜索如何循环数组。在我知道你提交了解决方案之前，我想与你分享我会试试的，谢谢。我已经试过你的解决方案了，效果很好。我希望它将HTML元素显示为原始视图，而不是显示警报消息。这样做的好方法是什么，将内容显示为html，或者将这些信息保存在html文件中，并显示与每个模型相关的特定部分“内容”？听起来很复杂；希望我很清楚。表结构的方式很好，我尝试只将模型显示为链接，并将其计算为文本，如：“BMW（12）”，因此当你点击该链接时，它会将内容显示为html。1）很酷，看起来你明白了

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