Muranx
@Muranx
кто понял this тот в цирке не смеётся

Как правильно формировать таблицы из массивов в JavaScript?

В общем мне нужно создать простенькую таблицу ранжирования игроков ! Вот что придумал я :
HTML :
<table id="someTable">
  <tr id="someTr">
    <td id="someTd">Rank</td>
    <td id="someTd">Nick-name</td>
    <td id="someTd">ID</td>
  </tr>
  <tr id="someTr">
    <td id="someTd" class="rank"></td>
    <td id="someTd" class="nick"></td>
    <td id="someTd" class="id"></td>
  </tr>
  <tr id="someTr">
    <td id="someTd" class="rank"></td>
    <td id="someTd" class="nick"></td>
    <td id="someTd" class="id"></td>
  </tr>
  <tr id="someTr">
    <td id="someTd" class="rank"></td>
    <td id="someTd" class="nick"></td>
    <td id="someTd" class="id"></td>
  </tr>
<!--   <tr id="someTr">
    <td id="someTd" class="rank"></td>
    <td id="someTd" class="nick"></td>
    <td id="someTd" class="id"></td>
  </tr> -->
<!--   <tr id="someTr">
    <td id="someTd" class="rank"></td>
    <td id="someTd" class="nick"></td>
    <td id="someTd" class="id"></td>
  </tr> -->
</table>

CSS :
table{
  border: 1px solid red;
}

td{
  border: 1px solid black;
  padding: 5px 10px;
  text-align: center
}

JavaScript :
var arr=[{rank: 1, nick: "Man", id: 20355},
         {rank: 2, nick: "Girl", id: 10795},
         {rank: 3, nick: "Dog", id: 90264},
         {rank: 4, nick: "Duck", id: 15124},
         {rank: 5, nick: "Fuck", id: 95626}
];

var tb = document.getElementById("someTable");
var tr = document.getElementById("someTr");
var td = someTable.getElementsByTagName("td");

var tdRank = someTable.getElementsByClassName("rank");
var tdNick = someTable.getElementsByClassName("nick");
var tdId = someTable.getElementsByClassName("id");


for(var i=0; i<tdRank.length; i++){
  tdRank[i].innerHTML = arr[i].rank
};

for(var i=0; i<tdNick.length; i++){
  tdNick[i].innerHTML = arr[i].nick
};

for(var i=0; i<tdId.length; i++){
  tdId[i].innerHTML = arr[i].id
};


Смею предположить моя версия "неживая"! Но по другому я не могу, в связи с этим вопрос. . .ы !

1) Каков вообще концептуально подход при создании таблиц ранжирования игроков , используются ли там массивы с данными если это таблицы, то имеет ли значения классы , с единственной помощью которых мне удалось заполнить ячейки ?

2) Есть ли смысл в это залазить не зная ни одного серверного языка програмирования , ведь данные об рангах и другие вещи я так понимаю берутся с сервера ?

3) Если в таблицах ранжирования используются массивы данных, тогда откуда берутся значения в этих массивах , смею предположить , что явно не програмист сидит и печатает все эти данные в ручную ?

4) Хоть что - нибудь из моей "схемы" имеет место для существования , ну хотя-бы ну например заполнения этой самой таблицы с помощью циклов и аппендЧайлдов ?

5) Если у кого есть идея ( в плане кода ) как сделать универсальную функцию , которая будет заполнять данные в соответствующии ячейки таблицы автоматически , можете написать вариант !

В общем вопросы несколько сумбурные, НО в виду того, что я вроде уже ни одну книжку по JS прочитал , а так и не могу понять , зачем этот язык нужен , зачем там такое внимание уделяется прототипному наследованию, и существует столько методов работы с объектами, а применение всему этому я так и не могу найти, вот и подумал взять что-то интересное для себя , ну а реализацию вы сами видите !-_- Буду рад услышать мнение людей , которые уже "прочувствовали JiSn'ь"!
  • Вопрос задан
  • 2939 просмотров
Решения вопроса 1
coderisimo
@coderisimo Куратор тега JavaScript
1) имхо, лучше отвязывать данные от представления. так что данные с сервера приходят в чистом виде, а браузер уже отрисовывает таблицу
2) надо изучать новые инструменты ) см.ниже
3) из базы данных конечно, хотя из файла тоже можно
4) есть много решений. какие-то лучше, какие-то хуже. я думаю стоит изучать имеющиеся, чтобы делать осознанный выбор
5) накатал пример, спешал фор ю ))


https://codepen.io/coderisimo/pen/QRNgxz?editors=1010

Обрати внимание, что для отрисовки таблицы по массиву данных вообще ничего писать не надо. Код получается очень лаконичный. Добавить столбец дело 10 секунд. Большая часть js написана для замены одного набора данных на другой. Можно вообще написать метод который будет получать массив анализировать его и сам делать нужное кол-во столбцов.
В общем, vue.js полезный и не слишком сложный инструмент для решения многих задач.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы