Не могу заставить CSS работать над добавленной таблицей

Question

Не могу заставить CSS работать над добавленной таблицей

0

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

Я хочу добавить их в таблицу. Это работает. Я получаю свою информацию в своей таблице, но я не могу добавить классы или идентификатор и немного стилизовать его.

http://jsfiddle.net/AKh4n/1/

success : function(data) {
    $('#lijstbeh').empty();

    var data2 = jQuery.parseJSON(data);
    $('#lijstbeh').append('<table class="table">');
    $('#lijstbeh').append('<tr>');
    $('#lijstbeh').append('<th>Behandeling ID</th>');
    $('#lijstbeh').append('<th>Behandeling kort</th>');
    $('#lijstbeh').append('<th>Behandeling datum</th>');
    $('#lijstbeh').append('</tr>');

    $.each (data2,function (bb) {
        $('#lijstbeh').append('<tr class="tblbehandelingen">');
        $('#lijstbeh').append('<td>' + data2[bb].BEH_ID + '</td>');
        $('#lijstbeh').append('<td>' + data2[bb].BEH_behandelingkort + '</td>');
        $('#lijstbeh').append('<td>' + data2[bb].BEH_datum + '</td>');
        $('#lijstbeh').append('</tr>');
    });

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

}

РЕДАКТИРОВАТЬ

$(document).ready(function () {
    $('.tblbehpatienten').click(function () {
        var value1 = $(this).find('td:first').text();
        var value2 = $(this).find('td:first').next().text();

        $("#beh_voornaampat").text(value1);
        $("#beh_familienaampat").text(value2);

        $.ajax({
            type: 'POST',
            url: 'home/getbehandelingen',
            datatype: "JSON",
            data: {
                PA_firstname: value1,
                PA_lastname: value2
            },
            success: function (data) {
                $('#lijstbeh').empty();

                var data2 = jQuery.parseJSON(data);

                var table_string = '<table>' + '<tr><th>Behandeling ID</th>' +
                  '<th>Behandeling kort</th>' + '<th>Behandeling datum</th></tr>';

                $.each(data2, function (bb) {
                    table_string += '<tr class="tbl"><td>' + data2[bb].BEH_ID + '</td>' +
                      '<td>' + data2[bb].BEH_behandelingkort +'</td>' +
                      '<td>' + data2[bb].BEH_datum + '</td></tr>';
                });

                table_string += '</table>';
                $(table_string).appendTo('div#lijstbeh');

            };
        });

    });

});

Теперь он делает мою голову. Кажется, он не работает. Ли я винт вверх } где - нибудь?

ИЗМЕНИТЬ СНОВА

}; должно быть } Я сейчас работаю. Благодарю!

battlenub 23 окт. 2013, в 00:03

Источник

0

Класс, кажется, просто добавляется в вашу скрипку.
j08691 22 окт. 2013, в 21:17
0

tr: hover {background: #FCF; } что-то такое простое не работает ...
battlenub 22 окт. 2013, в 21:21
1

элементы не добавляются как xyz.append('<table>'); xyz.append(</table>) вы должны включить как открывающий, так и закрывающий тег в аргумент функции добавления, как этот xyz.append('<table></table>')
UDB 22 окт. 2013, в 21:34

Показать ещё 1 комментарий

Теги:

php

jquery

1 ответ

Ещё вопросы

Класс, кажется, просто добавляется в вашу скрипку.
tr: hover {background: #FCF; } что-то такое простое не работает ...
элементы не добавляются как xyz.append('<table>'); xyz.append(</table>) вы должны включить как открывающий, так и закрывающий тег в аргумент функции добавления, как этот xyz.append('<table></table>')

showdev · Accepted Answer · 2013-10-22T19-13-00.000Z

Вы можете объединить свои приложения в один оператор append(). В противном случае jQuery закрывает теги для каждого из них. Проверьте DOM после добавления. Ваша структура выглядит так:

<div id="1">
  <table></table>
  <tr></tr>
  <th>Behandeling ID</th>
  <th>Behandeling kort</th>
  <th>Behandeling datum</th>
  <tr class="tbl" <="" tbody=""></tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</div>

Как вы можете видеть, это не действительная таблица.

Кроме того, в обработчике click вы ссылаетесь на элемент с идентификатором "tbl", но он должен быть ссылкой на класс, например .tbl.

Я также изменил обработчик click чтобы отложить его с помощью jQuery on().

 $('#1').append('<table>'+
                '<tr><th>Behandeling ID</th>'+
                '<th>Behandeling kort</th>'+
                '<th>Behandeling datum</th></tr>'+
                '<tr class="tbl"><td>' + "1" + '</td>'+
                '<td>' + "2" + '</td>'+
                '<td>' + "3" + '</td></tr>'+
                '</table>');

$(document).on('click','tr.tbl',function(){
    alert("dfmlgk");
});

http://jsfiddle.net/AKh4n/2/

РЕДАКТИРОВАТЬ:

В качестве альтернативы вы можете использовать appendTo().

В этом примере я сначала создаю таблицу как строку. Это может быть более полезно для динамически создаваемых таблиц. Построение таблицы в виде строки может быть выполнено с помощью append(); приведенный ниже пример демонстрирует построение таблицы как строки в дополнение к appendTo().

var table_string='<table>'+
                '<tr><th>Behandeling ID</th>'+
                '<th>Behandeling kort</th>'+
                '<th>Behandeling datum</th></tr>';

for (var i=1;i<=5;i++) {
    table_string+='<tr class="tbl"><td>row '+i+' column 1</td>'+
                '<td>row '+i+' column 2</td>'+
                '<td>row '+i+' column 3</td></tr>';
}

table_string+="</table>";

$(table_string).appendTo('div#1');

$(document).on('click','tr.tbl',function(){
    alert("dfmlgk");
});

http://jsfiddle.net/AKh4n/4/

Как я могу написать это в 1 заявлении добавления, где у меня есть цикл там?
Пожалуйста, смотрите мой отредактированный ответ о построении таблицы в виде строки перед добавлением.