Таблица циклом
Ребята, нужна помощь в таблице, а именно по созданию таблицы циклом
Есть входящие параметры, [{…}, {…}, {…}, {…}] 1:{"Login1"} 2:{"Login2"} 3:{"Login3"} 4:{"Login4"} 5: length 4 Нужно создать в таблицу, с двумя полями, в первую колонку мы пишем логин, во вторую заполняем логины, после того как приходят новые данные мы обновляем таблицу, как это организовать? :help: |
SpaceAlarm,
:-? |
Цитата:
|
Цитата:
Цитата:
|
SpaceAlarm,
1. в чём проблема построить таблицу. 2. Цитата:
структура данных и таблицы неизвестна. пример нужен обьект в js и таблица в html. 3. Цитата:
|
Вот еще пример
Цитата:
|
Цитата:
Таблица:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<tr>
<th>Группа</th>
<th>Логин</th>
</tr>
<tr>
<td>Администратор</td>
<td>test1</td>
</tr>
<tr>
<td>Пользователь</td>
<td>test2</td>
</tr>
<tr>
<td>Пользователь</td>
<td>test3</td>
</tr>
<tr>
<td>Пользователь</td>
<td>test4</td>
</tr>
</table>
</body>
</html>
3. Как приходят новые данные, обновлять в таблице их |
SpaceAlarm,
по прежнему недостаточно данных, может кто-то другой догадается ... |
SpaceAlarm,
Цитата:
Куда и каким образом приходят эти данные? |
Цитата:
|
Цитата:
|
SpaceAlarm,
Цитата:
Что это такое? Цитата:
Цитата:
|
SpaceAlarm,
создать таблицу из массива это 10 строк, знать бы ещё что вам нужно. смотрите примеры, может сами справитесь http://javascript.ru/forum/showthrea...350#post444350 https://javascript.ru/forum/misc/355...t-tablicu.html |
Цитата:
|
SpaceAlarm,
Вопросы есть? |
Цитата:
|
Создание таблицы из массива обьектов
SpaceAlarm,
от вас требовались строки 26 - 29 :( :( :(
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
text-align: center;
border: solid 1px #0000FF;
}
table {
border-collapse: collapse;
border: 1px solid #0000FF;
width: 300px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var data = [{client_nickname:"rrrrrrr", client_type:1}, {client_nickname:"yyyyyy", client_type:0}, {client_nickname:"yyy", client_type:0}, {client_nickname:"nnn", client_type:"x"}];
var type = {0 : "Пользователь", 1 : "Администратор"};
var thead = ["Группа","Логин"];
var filter = ["client_type", "client_nickname"];
function createTable(obj) {
var table = document.createElement("table");
if (obj.data && obj.filter && obj.type) {
obj.data.forEach(function(content, indx) {
var tr = table.insertRow(indx);
obj.filter.forEach(function(key, i) {
var td = tr.insertCell(i);
td.textContent = i ? content[key] : obj.type[content[key]] ? obj.type[content[key]] : "кто это?";
});
});
}
if (obj.thead) {
var thead = document.createElement("thead");
table.appendChild(thead);
var tr = thead.insertRow(0);
obj.thead.forEach(function(title) {
var th = document.createElement("th");
th.textContent = title;
tr.appendChild(th);
});
}
return table;
}
var table = createTable({thead:thead, data:data, filter:filter, type:type});
var parent = document.body;
parent.appendChild(table);
});
</script>
</head>
<body>
</body>
</html>
|
Спасибо большое, так я же вам дал структуру в скриншоте, приходящего объекта
|
Цитата:
|
Цитата:
socket.on('test', function(data) {
console.log(data.text.length);
let num = data.text.length;
for (var i = 0; i < num; i++) {
$('#num').append('<tr><td>ID:</td><td>'+data.text[i].client_ids+'</td></tr>');
}
});
Сейчас приходят данные с сервера, но они на странице добавляются один за одним, http://prntscr.com/hz4z49 Смысл того что, допустим есть 3 клиента, они с идами, 1,2,3 с сервера приходят эти иды каждую секунду, в место того чтобы они обновлялись просто, но они просто добавляются с низу, как это решить? |
SpaceAlarm,
запомнить и не добавлять больше, если ничего больше не изменяется, если будет изменение нужно знать что вы хотите изменить |
Цитата:
|
SpaceAlarm,
var out = {};
socket.on("test", function(data) {
console.log(data.text.length);
var num = data.text.length;
for (var i = 0; i < num; i++) {
var id = data.text[i].client_ids;
if (!out[id]) {
var tr = $("<tr><td>ID:</td><td>" + id + "</td></tr>").appendTo("#num");
out[id] = tr;
}
}
});
|
Цитата:
|
SpaceAlarm,
if (!out[id]) если нет в обьекте такого свойства, создаём строку |
Цитата:
var tr = $("<tr><td>ID:</td><td>" + id + "</td></tr>").appendTo("#num");
|
SpaceAlarm,
var tr = document.querySelector("#num tbody").insertAdjacentHTML("beforeEnd", "<tr><td>ID:</td><td>" + id + "</td></tr>");
|
Цитата:
|
SpaceAlarm,
важны детали, телепаты но пасаран
<table>
<tbody id="num">
<tr id="channel_list" class="danger"></tr>
</tbody>
</table>
<script>
var id = 2;
var tbody = document.querySelector("#num");
tbody.insertAdjacentHTML("beforeEnd", "<tr><td>ID:</td><td>" + id + "</td></tr>");
</script>
|
Спасибо
|
SpaceAlarm,
лучше так, если tr нужно, а не просто вставка
<table>
<tbody id="num">
<tr id="channel_list" class="danger"></tr>
</tbody>
</table>
<script>
var id = 2;
var tbody = document.querySelector("#num");
var tr = tbody.insertRow(tbody.rows.length);
tr.insertAdjacentHTML("beforeEnd", "<td>ID:</td><td>" + id + "</td>");
</script>
|
Цитата:
var list = {};
socket.on("lists", function(data) {
console.log(data.text);
let length = data.text.length;
for (var i = 0; i < length; i++) {
let login = data.text[i].nickname;
if (!list[login]) {
let tbody = document.querySelector("#num");
let tr = tbody.insertAdjacentHTML('beforeEnd', '<tr><td>User: '+i+'</td><td>' + login + '</td></tr>');
list[login] = tr;
}
}
});
|
Цитата:
Цитата:
|
SpaceAlarm,
var list = {};
socket.on("lists", function(data) {
console.log(data.text);
let length = data.text.length;
for (var i = 0; i < length; i++) {
let login = data.text[i].nickname;
if (!list[login]) {
let tbody = document.querySelector("#num");
let tr = tbody.insertRow(tbody.rows.length);
tr.insertAdjacentHTML("beforeEnd", '<td>User: '+i+'</td><td>' + login + '</td>');
list[login] = tr;
}
}
});
|
Огромное спасибо
|
| Часовой пояс GMT +3, время: 01:15. |