Как отобразить определенное количество столбцов таблицы в JavaScript и другие?

0

У меня есть список автомобилей:

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 с интерфейсами JavaScript и DOM . Я не одобряю статью, просто указываю, что она может помочь.
  • 0
    @RobG, спасибо за ваш комментарий / помощь. Как я уже упоминал, я хочу больше понять мыслительный процесс «объяснение и смысл требований», больше решить задачу. Например, последние 2 требования. мне не понятно, поэтому я и задал вопрос.
Показать ещё 3 комментария
Теги:

1 ответ

1
Лучший ответ

Вот пример, который может решить ваши требования:

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-код запущен.

EDIT2: Показывает автомобили в 3 колонках.

Рекомендации:

Функция сортировки

Функция generate_table [слегка изменена]

Поделиться
  • 0
    После комментариев и комментариев RobG я начинаю работу над HTML и почти попал сюда: fiddle.jshell.net/uwUEL , и все еще ищу, как перебрать массив. И я подумал поделиться с вами до того, как узнаю, что вы отправили решение. :) Я попробую, спасибо
  • 0
    Я попробовал ваше решение, и оно работает. Вместо того, чтобы показывать предупреждающее сообщение, в котором он отображает HTML-элемент в виде необработанного представления, я хочу, чтобы оно отображалось как HTML. Каков хороший способ сделать это, показать содержимое в виде HTML или сохранить эту информацию в файле HTML и показать тот конкретный раздел «контент», который относится к каждой модели? Это звучит сложно; Надеюсь, я в порядке.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню