如何在JavaScript等中显示表的特定列数

How to display specific number of columns of table in JavaScript and others?

本文关键字：显示 JavaScript      更新时间：2023-10-24

我有一个汽车列表：

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） 正如我在评论中提到的，有一个包含三列的html表。

2） 按车型名称对汽车进行排序。

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

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

在此处运行代码。

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

EDIT:更改代码，将详细信息放入div而不是警报框中，这样您就可以看到正在运行的HTML。

第2版：分3列显示汽车。

参考文献：

分拣功能

generate_table函数[略有修改]

相关文章：