Добавление строк в таблицу с различными данными

@vnmslf · Регистрация: 13.03.2015

Студворк — интернет-сервис помощи студентам

Доброго времени суток, форумчане!
Как сделать таблицу из 5 колонок, в первой ячейке первой строки должны быть картинка (пока просто картинка, в идеале, в будущем - картинка загружаемая с компа по названию), во второй текст и теги (туда планирую еще кое-что прикрутить на javascript), в третьей, четвертой и пятой ячейках первой строки будут числа (в будущем - подгружаемые откуда-либо).
И таких строк по умолчанию 10. По нажатию на кнопку нужно показать следующие 10 ниже тех, которые уже отображены.
Пока что у меня получилось сделать таблицу 5х10, при нажатии на кнопку у меня появляются 10 новых строк, но без стиля css...
Понимаю, что может не корректно объяснил, приведу часть исходного кода и скриншот:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<head>
<title>people</title>
<link type="text/css" rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="tp"></div>
<script type="text/javascript">
function addRow(id){
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
        td1.appendChild(document.createTextNode("img"))
    var td2 = document.createElement("TD")
        td2.appendChild (document.createTextNode("text"))
    var td3 = document.createElement("TD")
        td3.appendChild(document.createTextNode("Ideas"))
    var td4 = document.createElement("TD")
        td4.appendChild (document.createTextNode("Following"))
    var td5 = document.createElement("TD")
        td5.appendChild(document.createTextNode("Followers"))
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);
 
    tbody.appendChild(row);
}
</script>
<table id="tp_tbl" cellspacing="0" cellpadding="5" align=center border="0">
    <tr>
        <td>
        <img src="img/ppl2.png" hspace="7" width=21px height=14px><font face="Arial" size=4 color="#555555">PEOPLE</size>
        </td>
    </tr>
</table>
<br><br>
<center>
<table id="mn_tbl" cellspacing="0" border="0">
    <tbody>
        <tr id="mn_str_0">
            <td id="mn_col1"><div id="text1"> </div></th>
            <td id="mn_col2"><div id="text1"> </div></th>
            <td id="mn_col3"><div id="text1">Ideas</div></th>
            <td id="mn_col4"><div id="text1">Following</div></th>
            <td id="mn_col5"><div id="text1">Followers</div></th>
        </tr>
        <tr id="mn_str_1">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_2">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_1">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_2">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_1">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_2">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_1">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_2">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_1">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
        </tr>
        <tr id="mn_str_2">
            <td id="mn_col1"><img src="img/ppl.png" hspace="7" width=35px height=35px></td>
            <td id="mn_col2"><div id="text1_b">Значение 2</div></td>
            <td id="mn_col3"><div id="text1_b">Значение 3</div></td>
            <td id="mn_col4"><div id="text1_b">Значение 4</div></td>
            <td id="mn_col5"><div id="text1_b">Значение 5</div></td>
    </tbody>
</table>
<a href="javascript://" id="knopka" onclick="addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');addRow('mn_tbl');return false;">SHOW MORE</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="bttm"></div>
</body>
</html>

Сам знаю, что коряво!!! Но я только учусь! Заранее спасибо, буду оч признателен!
P.S. В идеале нужно сделать то, что прикрепляю вторым скриншотом.

@JokerNN · 05.05.2015, 11:13

Рискну предположить, что в css стили на id навешаны: #mn_str_1 и #mn_str_2.
Это на самом деле не есть корректно, потому что на странице не должно быть элементов с одинаковыми айдишниками. Но это работает потому что браузеры умные.
Если хотите можете добавлять эти айдишники к новым элементам, т.е. писать например

JavaScript
1
2
row.id = "mn_str_1";
td1.id="mn_col_1;"

Это быстрое но плохое решение.

Если хотите сделать по-хорошему, надо переделать стили для таблицы, хотя бы перейти на классы.
А можно использовать css селекторы nth-child(even) и nth-child(odd) для того чтобы фон строк чередовать. Тогда не придётся иметь два разных айдишника или класса для строк.
Погуглите A Complete Guide to the Table Element, в этой статье много интересного про таблицы.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Добавление строк в таблицу с различными данными

Решение