Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 20.06.2017
Сообщений: 4
1

Появляются лишние символы после генерации таблицы

02.08.2017, 12:30. Показов 1260. Ответов 4
Метки нет (Все метки)

Добрый день! JS изучаю совсем недавно и при выполнении одного из заданий по созданию таблицы появилась проблема - появляются лишние (запятые) в конце таблицы. Подскажите, в чём может быть проблема

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Прототип форума</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Tinos" rel="stylesheet">
    </head>
    <body>
        <table id="table">
            <thead>
                <tr class="header1">
                    <th class="padding-left" colspan="4"><span>Образование</span></th>
                    <th class="right"><span>RSS</span></th>
                </tr>
                <tr class="header2">
                    <th class="padding-left" colspan="2">Темы</th>
                    <th><span>Ответы</span></th>
                    <th><span>Просмотры</span></th>
                    <th><span>Обновление</span></th>
                </tr>
            </thead>
 
        </table>
    <script>
        (function(){
            var topics = [
                {
                    topic: {
                        title: 'Образование должно служить Человеку, не рынку.',
                        description: 'Высшее образование –ВСЕМ, тараторщина - это дебилизация и дискриминация· автор: Владимир Васильевич Машков'
                    },
                    pagination: 66,
                    answers: 657,
                    views: 36575,
                    lastUpdate: {
                        timestamp: 1417093756000, //date in milliseconds
                        author: 1   //user id
                    }
                },
                {
                    topic: {
                        title: 'Какой должна быть школа будущего',
                        description: 'Прежде всего школа обязана сформировать из ребенка Человека. Не накачивать его знаниями, а изменять, чтобы понимал себя, природу и человеческое общество. Автор: andre75'
                    },
                    pagination: 33,
                    answers: 326,
                    views: 50557,
                    lastUpdate: {
                        timestamp: 1412442708000,
                        author: 2
                    }
                },
                {
                    topic: {
                        title: 'Образованны ли люди, получившие российское образование.',
                        description: 'Преподавание в вузах держится на старичках, с низкой зарплатой. автор: Лимарев Виктор'
                    },
                    pagination: 55,
                    answers: 543,
                    views: 140233,
                    lastUpdate: {
                        timestamp: 1412011308000,
                        author: 3
                    }
                },
                {
                    topic: {
                        title: 'Особенности воспитания современных детей',
                        description: 'Особенности воспитания современных детей. автор: Sasha-85'
                    },
                    pagination: 4,
                    answers: 31,
                    views: 5742,
                    lastUpdate: {
                        timestamp: 1411031271000,
                        author: 1
                    }
                }
            ];
 
            var users = [
                {
                    login: 'ecoil',
                    id: 1
                },
                {
                    login: 'PINGVIN',
                    id: 2
                },
                {
                    login: 'Техрук',
                    id: 3
                }
            ]
 
            var i = 0;
 
            function getDate(){
                var now = new Date(topics[i].lastUpdate.timestamp);
                var time = now.toLocaleTimeString();
                var dd = now.getDate();
                var mm = now.getMonth() + 1;
                var yy = now.getFullYear();
 
                if (dd < 10) dd = '0' + dd;
                if (mm < 10) mm = '0' + mm;
 
                return dd + '.' + mm + '.' + yy + " " + time;
            }
 
            function getUsers() {
 
                users.forEach(function (itemCat) {
                    if (itemCat.id ==  topics[i].lastUpdate.author) {
                        return itemCat.login;
                    }
 
                });
            }
 
            function renderTable(name) {
                var html = topics.map(row);
 
                document.getElementById('table').innerHTML += html;
            }
 
            debugger;
 
            function row(rowData, index) {
                i = index;
                if (index == 0) {
                return '<tr>' +
                            '<td class="td1"><img src="image/batton1.png" alt="img"></td>' +
                            '<td class="td2"><a href="#">' + rowData.topic.title + '</a>' + '<span class="color-2"> new</span>' +
                                '<span class="wrap">' + ' (' +
                                    '<a href="#" target="_blank">' + '1' + '</a>' + ', ' +
                                    '<a href="#" target="_blank">' + '2' + '</a>' + ', ' +
                                    '<a href="#" target="_blank">' + '3' + '</a>' + ' ... ' +
                                    '<a href="#" target="_blank">' + rowData.pagination + '</a>) ' +
                                '</span>' +
                                '<div>' + rowData.topic.description + '</div></td>' +
                            '<td class="td3"><span>' + rowData.answers + '</span></td>' +
                            '<td class="td4"><span>' + rowData.views + '</span></td>' +
                            '<td class="td5"><a href="#">' + getDate() + '</a>' +
                                '<div>' + getUsers() + '</div>' +
                            '</td>';
                }
 
                else
                    return '<tr>' +
                        '<td class="td1"><img src="image/batton2.png" alt="img"></td>' +
                        '<td class="td2"><a href="#">' + rowData.topic.title + '</a>' +
                            '<span class="wrap">' + ' (' +
                                '<a href="#" target="_blank">' + '1' + '</a>' + ', ' +
                                '<a href="#" target="_blank">' + '2' + '</a>' + ', ' +
                                '<a href="#" target="_blank">' + '3' + '</a>' + ' ... ' +
                                '<a href="#" target="_blank">' + rowData.pagination + '</a>) ' +
                            '</span>' +
                        '<div>' + rowData.topic.description + '</div></td>' +
                        '<td class="td3"><span>' + rowData.answers + '</span></td>' +
                        '<td class="td4"><span>' + rowData.views + '</span></td>' +
                        '<td class="td5"><a href="#">' + getDate() + '</a>' +
                            '<div>' + getUsers() + '</div>' +
                        '</td>';
 
            }
 
            renderTable();
 
        })()
    </script>
    </body>
</html>
CSS
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
@font-face {
    font-family: 'Conv_Alice-Regular';
    src: url('fonts/Alice-Regular.eot');
    src: local('O'), url('fonts/Alice-Regular.woff') format('woff'),
    url('fonts/Alice-Regular.ttf') format('truetype'),
    url('fonts/Alice-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
    padding: 10px 20px;
    font: 16px 'Tinos', serif;
}
 
 
table {
    width: 870px;
    height: auto;
    border-collapse: collapse;
    text-align: left;
    border: 1px solid lightgray;
}
 
th {
    border-top: 1px solid black;
    padding: 9px;
}
 
td {
    border: 1px solid lightgray;
}
 
a {
    text-decoration: none;
    color: #0088cc;
    font-family: Conv_Alice-Regular;
}
 
a:hover { 
    text-decoration: underline;
}
 
 
.td1 {
    padding-top: 10px;
    width: 48px;
    text-align: center;
}
 
.td2 {
    padding: 7px 10px 5px 16px;
    width: 428px;
    vertical-align: top;
    line-height: 1.4;
}
 
.td3  {
    padding-top:: 18px;
    width: 53px;
    text-align: center;
}
 
.td4 {
    padding-top:: 18px;
    width: 63px;
    text-align: center;
}
 
.td5 {
    padding: 7px 0px 0px 16px;
    vertical-align: top;
    line-height: 1.4;
}
 
 
.right {
    text-align: right;
    padding-right: 16px;
}
 
.header1 {
    background-color: #0083b6;
    color: white;
}
 
.header2 {
    background-color: #e0e7ee;
    color: black;
}
 
.color-2 {
    color: red;
}
 
.padding-left {
    padding-left: 16px;
}
 
.wrap {
    white-space: nowrap;
}
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.08.2017, 12:30
Ответы с готовыми решениями:

После загрузки страницы появляются лишние стили в элементе li
Приветствую всех! Люди добрые, ради господа Бога помоги, не пинайте ногами, с такой проблемой...

При выводе на экран появляются лишние символы
#include &lt;iostream&gt; // ??? printf #include &lt;string.h&gt; // ??? strtok bool IsPalindrom (char...

Появляются лишние символы при считывании текстового файла
Добрый день. Необходима помощь, имеется текстовый файл, в котором содержится информация о том или...

Прием данных через COM: появляются лишние символы на приеме
Добрый день! Имеется устройство (Arduino), которое раз в секунду пишет в порт целое число в виде...

4
Эксперт JS
2067 / 1433 / 557
Регистрация: 11.07.2016
Сообщений: 3,379
02.08.2017, 15:17 2
Лучший ответ Сообщение было отмечено Kuleshovbb как решение

Решение

125я строка разметки:
Javascript
1
document.getElementById('table').innerHTML += html.join('');
1
0 / 0 / 0
Регистрация: 20.06.2017
Сообщений: 4
02.08.2017, 15:33  [ТС] 3
Спасибо!

У меня есть ещё одна ошибка при создании таблицы. При выполнении функции getUsers() (112 строка) у меня на выходе получается всегда значение undefined. Подскажите, где я ошибся?
0
Эксперт JS
2067 / 1433 / 557
Регистрация: 11.07.2016
Сообщений: 3,379
02.08.2017, 15:48 4
Потому что оператор return вызывается в контексте анонимной функции метода forEach(), а не в контексте getUsers()
Javascript
1
2
3
4
5
6
7
8
9
10
function getUsers() {
 
                for (var u = 0; u < users.length; u++) {
                    var itemCat = users[u];
                    if (itemCat.id ==  topics[i].lastUpdate.author) {
                        return itemCat.login;
                    }
 
                }
            }
1
0 / 0 / 0
Регистрация: 20.06.2017
Сообщений: 4
02.08.2017, 16:00  [ТС] 5
Точно. Ещё раз спасибо)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.08.2017, 16:00

Ошибка считывания строки из StringGrid, появляются лишние символы
Вся суть проблемы вот в чём.... Я считываю строку из таблицы(StringGrid). Пробовал вначале как...

Avidemux 2.5: После обработки появляются лишние кадры
После обработки(даже простое сжатие) с помощью Avidemux 2.5 в видео (не только с фотика) вначале...

Появляются лишние цифры после запятой при считывании в переменную типа double
Считываю в переменную double pow число 2.56 и вместо нормальной записи в конец числа добаляеться...

Добавляются лишние символы после md5
Привет форумчане. Такая проблема: Есть скрипт регистрации, в нём я принимаю логин и пароль....

Удалить лишние символы после парсинга
Добрый вечер! Уже киплю... Перепробовал уже с 10-ток всяких функций по работе со строками после...

Лишние символы после декодирования 3DES...
Здравствуйте ! У меня такая проблема: Появляются лишние символы после декодирования и 3DES. Вот...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.