как динамически добавлять тр элемент с помощью CSS в таблице

Я пробегаем по $.each в JQuery и получить обратно данные и добавления этих данных в таблицу, как это:как динамически добавлять тр элемент с помощью CSS в таблице

$.each(segment, function (index, innerSegment) { 
var tr; 
tr = $('<tr/>'); 
tr.append("<td>" + segment[i].Airline.AirlineName + "</td>"); 

tr.append("<td>" + segment[i].ArrivalTime + "</td>"); 
tr.append("<td>" + segment[i].Origin "</td>"); 

tr.append("<td>" + segment[i].DepartureTime + "</td>"); 
tr.append("<td>" + segment[i].Destination "</td>"); 

tr.append("<td>" + segment[i].Duration + "</td>"); 
tr.append("<td>" + segment[i].publishedFare "</td>"); 
$('#tableId').append(tr); 
}

Теперь я получаю обратно корректные данные от $.each петля. Но все данные добавляются один за другим.

Я хочу добавить данные в этом jsfiddle. https://jsfiddle.net/1pbso9jt/

Моя таблица выглядит так:

<table id="tableId"> 
    <tr> 
     </tr> 
</table>

источник

2016-06-01 duke

вы можете обмениваться данными сегмента? – guradio

можете попробовать это '$ .each (сегмент, функция (индекс, innerSegment) { вар тр; тр = $ (' '); тр = $ (' '); tr.append (" <тд RowSpan = "4"> "+ отрезок [я] .Airline.AirlineName + " "); tr.append (" " + отрезок [я] .ArrivalTime +" "); tr.append (" "+ отрезок [я] .Origin" "); tr.append (" "+ отрезок [я] .DepartureTime +" "); tr.append (" "+ отрезок [I]. De stination ""); tr.append ("" + segment [i] .Duration + ""); tr.append ("" + segment [i] .publishedFare ""); $ ('# tableId'). Append (tr); } ' – guradio

Насколько я знаю' $ ('') 'не является допустимым селектором элементов try' $ ('tr') ', если вы действительно хотите добавить в строку таблицы. Хотя мое предложение состоит в том, чтобы добавить весь блок в ваш '# tableId'. Например. '$ ('# tableId'). append ('' + сегмент [i] .Airline.AirlineName + '');'. Для более красивого кода вы можете добавить разрыв строки после или перед '+', я предпочитаю, чтобы мой код выглядел как чистый html. – AlexG

Как это:

var table = $('#tableId'); 
$.each(segment, function (index, innerSegment) { 
    var rows = '<tr><td rowspan="4" width="25%">' + segment[i].Airline.AirlineName + "</td>"; 
    rows += '<td width="25%">' + segment[i].ArrivalTime + "</td>"; 
    rows += '<td rowspan="4" width="25%">&nbsp;</td>'; 
    rows += '<td rowspan="4" width="25%">' + segment[i].publishedFare + "</td></tr>"; 
    rows += "<tr><td>" + segment[i].Origin + "</td></tr>"; 
    rows += "<tr><td>" + segment[i].DepartureTime + "</td></tr>"; 
    rows += "<tr><td>" + segment[i].Destination + "</td></tr>"; 

    table.append(rows); 
});

Example fiddle with the each commented out

Updated fiddle with your data

источник

2016-06-01 08:54:53 Pete

позвольте мне попробовать, что-то вроде этой htps://jsfiddle.net/L90ra64d/8/ @Pete – duke

Вот ваша обновленная скрипка: https: // jsfiddle ,net/L90ra64d/9/вы не можете сохранить свой апад, хотя, как вы изменили структуру столбцов (так что это не имеет никакого смысла в любом случае). Если вы хотите сохранить заголовки, это должно быть что-то вроде этого: https://jsfiddle.net/L90ra64d/10/ – Pete

i dont want header он был только для ссылки изначально @Pete, если ни один заголовок не имеет проблемы – duke

Вы должны объединить jsfiddle с петлей, как это:

$.each(segment, function (index, innerSegment) { 
    var output; 
    output = $('<table border="1"style="width:100%"><tr>'); 
    output.append("<td rowspan="4"style="width:25%">" + segment[i].Airline.AirlineName + "</td>"); 
    output.append("<td height="58">" + segment[i].ArrivalTime + "</td>"); 
    ... 
    etcetera 
    ... 
    $('#tableId').append(output); 
}

источник

2016-06-01 08:53:35 JoostS

https://jsfiddle.net/L90ra64d/8/ это демонстрационная скрипка взгляните на нее @JoostS – duke

Попробуйте: -

$.each(segment, function (index, innerSegment) { 
var tr; 
tr = "<tr/>"; 
tr+= "<td>" + segment[i].Airline.AirlineName + "</td>"; 

tr+= "<td>" + segment[i].ArrivalTime + "</td>"; 
tr+= "<td>" + segment[i].Origin "</td>"; 

tr+= "<td>" + segment[i].DepartureTime + "</td>"; 
tr+= "<td>" + segment[i].Destination "</td>"; 

tr += "<td>" + segment[i].Duration + "</td>"; 
tr += "<td>" + segment[i].publishedFare "</td>"; 
$('#tableId').append(tr); 
}

источник

2016-06-01 08:56:13 Harsh

как динамически добавлять тр элемент с помощью CSS в таблице

ответ

Смежные вопросы