jQuery добавленная таблица добавляет закрывающий тег в конце текста автоматически.Зачем? - PullRequest
Новая
       18

jQuery добавленная таблица добавляет закрывающий тег в конце текста автоматически.Зачем?

3 голосов
/ 10 ноября 2011 
$('#all_locations').append("<table>");
$('#all_locations').append("<tr><th>City</th></tr>");

$.each(data, function(i, item){
    $('#all_locations').append("<tr>");
    $('#all_locations').append("<td>"+item.city+"</td>");
    $('#all_locations').append("<tr>");
}

$('#all_locations').append("</table>");

Выход получен с использованием alert($('#all_locations').html());

<table></table>
<tr><th>City</th></tr>
<tr></tr><td>Seattle</td>
<tr></tr><td>Chicago</td>

Этот код срабатывает после завершения вызова ajax.Любые идеи, почему это происходит?

Предположим, что переменная данных является допустимым объектом JSON.

Ответы [ 4 ]

14 голосов
/ 10 ноября 2011

Несмотря на абстракцию, которую предлагает jQuery, вы работаете с элементами в DOM, а не с тегами в источнике HTML.

jQuery('<table>') является сокращением для jQuery(document.createElement('table')).

Вам необходимо добавить строки таблицы в таблицу, а не в контейнер (и аналогично, в строки необходимо добавить ячейки).

4 голосов
/ 10 ноября 2011

Лучше всего создать строку своего HTML-кода, чтобы добавить и выполнить один .append() вызов этой строки: 

//declare our output variable
var output = '<table><tr><th>City</th></tr>';

//iterate through data
$.each(data, function(i, item){

    //add to output variable
    output += '<tr><td>' + item.city + '</td></tr>';
}

//append the output to the DOM
$('#all_locations').append(output);

Довольно часто можно увидеть, как люди помещают элементы в массив и присоединяются к этому массиву.для приложения: 

//declare our output variable (array)
var output = ['<table><tr><th>City</th></tr>'];

//iterate through data
$.each(data, function(i, item){

    //add to output variable
    output.push('<tr><td>' + item.city + '</td></tr>');
}

//append the output to the DOM after joining it together into a string
$('#all_locations').append(output.join(''));
0 голосов
/ 15 сентября 2013

Добавьте id к тегу, чтобы решить эту проблему.Затем добавьте подэлемент к этому id вместо родительского элемента. 

$(function(){

    for(var lvl=0;lvl<5;lvl++)
    {
        $("#tblId tbody").append("<tr id="+lvl+"/>");                   
        for(var fchr=0;fchr<3;fchr++)
            $("#tblId tbody #"+lvl).append("<td>Val"+lvl+fchr+"</td>");
    }

    alert($('#tblId').html());

});

Рабочий пример, см. Здесь: http://jsfiddle.net/WHscf/1/

0 голосов
/ 10 ноября 2011

Вместо того, чтобы делать это таким образом, попробуйте что-то вроде этого: 

var table = $("<table>");
if (table){
    table.append($("<tr>").append($("<th>").text("City")));
    $.each(data, function(i, item){
        table.append($("<tr>").append($("<td>").text(item.city)));
    });
    table.appendTo($("#all_locations"));
}

Вот еще один способ, который ближе к тому, как вы это делаете в настоящее время: 

$("#all_locations""#all_locations").append("<tr><th>City</th></tr>"); 

$.each(data, function(i, item){  
    $('#all_locations').append("<tr>");  
    $('#all_locations').append("<td>""<tr><td>" + item.city + "</td>"td></tr>");  
    $('#all_locations').append("<tr>"});  
} 

$("#all_locations tr").wrapAll("<table></table>");
...