ячейки таблицы не отображаются в строке таблицы

Question

JSON Структура:

{"строки": [

 {"row":[ 
      {"cells": [
     {"data": "Edit"},
     {"data": "030194"},

      ]}
 ]},
 {"row":[
      {"cells": [
     {"data": "Add"},
     {"data": "030194"},
      ]}
 ]},
 {"row":[
      {"cells": [
     {"data": "Delete"},
     {"data": "030194"},
      ]}
 ]}           

]}

Код JQuery:

$. Каждый (response.rows, функция (индекс, строки) {

 $.each(rows.row, function(index,row){ 
      var element=$("tbody").append("<tr id='" + index + "'>");  
      var element1=element.append("<td><input type='checkbox'></input></td>");
      $.each(this.cells, function(index){ 
           element1.append("<td>" + this.data + "</td>"); 
      });
      $("tbody").append("</tr>"); 
 });  

});

Проблемы:

1. У каждой сгенерированной строки есть идентификатор со значением индекса = 0. Идентификатор для Row1 должен быть 0, для Row2 он должен быть 1, а дляИдентификатор Row3 должен быть равен 2

2. td элементы выводятся как дочерние элементы tbody.Они должны быть потомками tr

3. закрывающий tr должен быть нарисован после последней ячейки в каждой строке, в настоящее время tr закрывается сам перед тем, как нарисована любая ячейка

Answer 1

Попробуй это.Это немного озадачило меня, потому что я привык к синтаксису .each () в контексте циклического прохождения элементов DOM.Поскольку это $ .each (), индекс первого цикла относится к числу, которое вы пытались получить для каждой строки.

Я переместил добавление TR за пределы цикла, в котором он был.

(Last-child - не самый быстрый способ добавления TD, вы можете использовать createElement, например, как Endophage, а затемсм. также)

http://jsfiddle.net/EY4an/

$.each(response.rows, function(index, rows) {

    $("tbody").append('<tr id="index' + index + '"></tr>');

    $.each(this.row, function(index) {
        var element1 = $("tbody tr:last-child").append("<td><input type='checkbox'></input></td>");
        $.each(this.cells, function(index) {
            element1.append("<td>" + this.data + "</td>");
        });
    });
});

Я также добавил слово «индекс» к атрибутам идентификаторов в строках таблицы, поскольку идентификаторы должны начинаться с буквы.

Answer 2

Не уверен на 100% в проблеме с индексом, но с точки зрения рендеринга, здесь есть разбивка:

var element=$("tbody").append("<tr id='" + index + "'>");

Я думаю, что именно здесь начинается ваша ошибка, в приведенной выше строке элемент будет равен tbody, а не tr.

var element1=element.append("<td><input type='checkbox'></input></td>");

Здесь вы теперь добавляете td к tbody, и тогда element1 также будет равен tbody. следовательно, следующее добавление внутри каждого не работает правильно. Наконец, вы должны добавлять только целые элементы, поэтому нельзя ожидать, что добавление <tr> и </tr> как двух отдельных операций сработает.

Попробуйте следующее:

var row = document.createElement('tr');
row.setAttribute('id', index);
$("tbody").append(row);  
$(row).append("<td><input type='checkbox'></input></td>");
$.each(this.cells, function(index){ 
    $(row).append("<td>" + this.data + "</td>"); 
});
$("tbody").append(row);

Просто мысль о проблеме индекса. Вы используете имя index дважды. Попробуйте использовать другое имя переменной для одного из них.