Построение таблицы
Добрый день!Подскажие,в чем ошибка,подгружаю данные с бд и заношу их в таблицу, но таблица у меня строится вида
<table id="dynamic" class="table table-striped table-dark">
<thead>
<tr>
<td id="ID">ID</td>
<td id="comment">comment</td>
<td id="Chek">Chek</td>
</tr>
</thead>
<tbody>
<tr class="str"></tr>
<tr class="str"></tr>
<td>210</td>
<td>Ю́рий Алексе́евич Гага́рин — лётчик-космонавт СССР № 1, Герой Советского Союза, кавалер высших знако</td>
<tr class="str"></tr>
<td>211</td>
<td>Альбе́рт Эйнште́йн — физик-теоретик, один из основателей современной теоретической физики, лауреат Н</td>
<tr class="str"></tr>
<td>212</td>
<td>Фили́пп Бедро́сович Кирко́ров — советский и российский эстрадный певец, актёр, композитор и продюсер</td>
<tr class="str"></tr>
<td>214</td>
<td>Марк Э́ллиот Цу́керберг — американский программист и предприниматель в области интернет-технологий, </td>
<tr class="str"></tr>
<td>215</td>
<td>Илон Рив Маск — канадско-американский инженер, предприниматель, изобретатель и инвестор; долларовый </td>
<tr class="str"></tr>
<td>216</td>
<td>NoName</td>
</tbody>
</table>
а надо вида
<table id="dynamic" class="table table-striped table-dark">
<thead>
<td id="id">ID</td>
<td id="comment">comment</td>
<td id="check">Chek</td>
</thead>
<tbody>
<tr>
<td> 210</td>
<td> Ю́рий Алексе́евич Гага́рин — лётчик-космонавт СССР № 1, Герой Советского Союза, кавалер высших знако</td>
<td> <input type="checkbox" value="0" class="form-control"></td>
</tr>
<tr>
<td> 211</td>
<td> Альбе́рт Эйнште́йн — физик-теоретик, один из основателей современной теоретической физики, лауреат Н</td>
<td> <input type="checkbox" value="0" class="form-control"></td>
</tr>
<tr>
<td> 212</td>
<td> Фили́пп Бедро́сович Кирко́ров — советский и российский эстрадный певец, актёр, композитор и продюсер</td>
<td> <input type="checkbox" value="0" class="form-control"></td>
</tr>
<tr>
<td> 214</td>
<td> Марк Э́ллиот Цу́керберг — американский программист и предприниматель в области интернет-технологий, </td>
<td> <input type="checkbox" value="0" class="form-control"></td>
</tr>
<tr>
<td> 215</td>
<td> Илон Рив Маск — канадско-американский инженер, предприниматель, изобретатель и инвестор; долларовый </td>
<td> <input type="checkbox" value="0" class="form-control"></td>
</tr>
</tbody>
</table>
т.е. что бы ячейки были по строкам таблицу создаю так https://jsfiddle.net/es9u0635/7/ Где ошибка?Что я делаю не так? |
Если заголовок таблицы постоянный, зачем же вы им оперируете? И данные, их структура, мягко сказать, не продумана - это результат лишнего из запроса к базе.
|
Цитата:
|
<thead>
<td id="id">ID</td> <td id="comment">comment</td> <td id="check">Chek</td> </thead> Это что изменяется постоянно? Наверное же нет, так зачем вы получаете эти элементы в скрипте? Данные, это просто ужас какой-то. Во-первых, почему первый элемент массива пустой? Не должен сервер возвращать пустоту. Данные ваши это результат необдуманного получения записей из результата запроса к базе. То есть совсем не думая, нужно, не нужно, просто используется функция mysql_fetch_array(), а она без указания чего надо, возвращает два идентичных набора данных - один индексный, второй ассоциативный. Затем вы это выплевываете клиенту и получаете на нем то, что получаете - бардак, а не данные. Работаете с ассоциацией, значит используйте mysql_fetch_assoc() или указывайте в mysql_fetch_array() чего нужно. Почему строковые данные обрезаны или это для примера? Наведите сначала порядок в серверном скрипте.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#reg4").click(function() {
var $body = $('#dynamic tbody'), tmp = '';
var res = [
{
ID: "210",
comment: "Ю́рий Алексе́евич Гага́рин — лётчик-космонавт СССР № 1, Герой Советского Союза, кавалер высших знако",
Check: "0"
},
{
ID: "211",
comment: "Альбе́рт Эйнште́йн — физик-теоретик, один из основателей современной теоретической физики, лауреат Н",
Check: "0"
},
{
ID: "212",
comment: "Фили́пп Бедро́сович Кирко́ров — советский и российский эстрадный певец, актёр, композитор и продюсер",
Chek: "0"
},
{
ID: "214",
comment: "Марк Э́ллиот Цу́керберг — американский программист и предприниматель в области интернет-технологий, ",
Chek: "0"
},
{
ID: "215",
comment: "Илон Рив Маск — канадско-американский инженер, предприниматель, изобретатель и инвестор; долларовый ",
Chek: "0"
}
];
// Перебираем массив
$.each(res, function() {
// Добавляем строку в таблицу
tmp += '<tr class="str"><td>'+this.ID+'</td><td>'+this.comment+'</td><td><input type="checkbox" value="'+this.Chek+'" class="form-control"/></td></tr>';
});
$body.html(tmp);
});
});
</script>
</head>
<body>
<table id="dynamic">
<thead>
<tr>
<td>ID</td>
<td>comment</td>
<td>Chek</td>
</tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="GO" id="reg4"/>
</body>
</html>
|
Сергей74rus,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script>
$(function() {
$("#reg4").click(function() {
var $table = $('#dynamic'),
$table_head = $table.find('thead'),
$table_body = $table.find('tbody');
$table_head.empty();
$table_body.empty();
var res = ["", {
0: "210",
1: "Ю́рий Алексе́евич Гага́рин — лётчик-космонавт СССР № 1, Герой Советского Союза, кавалер высших знако",
2: "0",
ID: "210",
comment: "Ю́рий Алексе́евич Гага́рин — лётчик-космонавт СССР № 1, Герой Советского Союза, кавалер высших знако",
Chek: "0"
},
{
0: "211",
1: "Альбе́рт Эйнште́йн — физик-теоретик, один из основателей современной теоретической физики, лауреат Н",
2: "0",
ID: "211",
comment: "Альбе́рт Эйнште́йн — физик-теоретик, один из основателей современной теоретической физики, лауреат Н",
Chek: "0"
},
{
0: "212",
1: "Фили́пп Бедро́сович Кирко́ров — советский и российский эстрадный певец, актёр, композитор и продюсер",
2: "0",
ID: "212",
comment: "Фили́пп Бедро́сович Кирко́ров — советский и российский эстрадный певец, актёр, композитор и продюсер",
Chek: "0"
}, {
0: "214",
1: "Марк Э́ллиот Цу́керберг — американский программист и предприниматель в области интернет-технологий, ",
2: "0",
ID: "214",
comment: "Марк Э́ллиот Цу́керберг — американский программист и предприниматель в области интернет-технологий, ",
Chek: "0"
}, {
0: "215",
1: "Илон Рив Маск — канадско-американский инженер, предприниматель, изобретатель и инвестор; долларовый ",
2: "0",
ID: "215",
comment: "Илон Рив Маск — канадско-американский инженер, предприниматель, изобретатель и инвестор; долларовый ",
Chek: "0"
}, {
0: "216",
1: "NoName",
2: "0",
ID: "216",
comment: "NoName",
Chek: "0"
}
];
var tr = $("<tr class='str' />").appendTo($table_head),
td = $("<td/>", {html : "ID"}).appendTo(tr);
td = $("<td/>", {html : "comment"}).appendTo(tr);
td = $("<td/>", {html : "Chek"}).appendTo(tr);
// Перебираем массив
res.forEach(function(value) {
if(value){
var tr = $("<tr class='str' />").appendTo($table_body),
td = $("<td/>", {html : value.ID}).appendTo(tr);
td = $("<td/>", {html : value.comment}).appendTo(tr);
td = $("<td/>").appendTo(tr);
$('<input type="checkbox" value="'+ value.Chek + '" class="form-control"/>').appendTo(td);
}
});
});
});
</script>
</head>
<body>
<table id="dynamic" class="table table-striped table-dark">
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
<input type="submit" value="sdfsdfsdfsfsf" id="reg4"/>
</body>
</html>
|
рони,
не надо поощрять бардак. ) |
| Часовой пояс GMT +3, время: 07:59. |