似乎无法让CSS在附表上工作

时间:2013-10-22 21:11:31

标签: php jquery

我有一个对php文件的ajax请求,每行返回3个值的行。

我想将这些附加到表格中。这有效。我在我的表中获取了我的信息,但我似乎无法添加类或id并在其上获得一些样式。

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');

            };
        });

    });

});

现在正在努力。似乎无法让它发挥作用。我在某个地方弄了}吗?

再次编辑

};应该是}我现在有效了。谢谢!

1 个答案:

答案 0 :(得分:0)

您可能希望将附加内容合并为一个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处理程序中,您指的是ID为“tbl”的元素,但它应该是类引用,如.tbl

我还使用jQuery的on()更改了您的click处理程序。

 $('#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/