Форум

Сергей74rus · #1 (**permalink**) 11.03.2018, 14:52

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

<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/
Где ошибка?Что я делаю не так?

laimas · #2 (**permalink**) 11.03.2018, 15:20

Если заголовок таблицы постоянный, зачем же вы им оперируете? И данные, их структура, мягко сказать, не продумана - это результат лишнего из запроса к базе.

Сергей74rus · #3 (**permalink**) 11.03.2018, 16:05

Сообщение от laimas

Если заголовок таблицы постоянный, зачем же вы им оперируете? И данные, их структура, мягко сказать, не продумана - это результат лишнего из запроса к базе.

не совсем понимаю вас

laimas · #4 (**permalink**) 11.03.2018, 16:16

<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>

рони · #5 (**permalink**) 11.03.2018, 16:39

Сергей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>

laimas · #6 (**permalink**) 11.03.2018, 17:04

рони,
не надо поощрять бардак. )

Форум

Справочник

Discord чат

Курсы javascript