HTML表格未显示列中的内容

Question

用户可以搜索数据库中包含的人，在输入文本中引入搜索词。 我使用以下Ajax脚本来显示从JSON收到的数据库对象：

<script type="text/javascript">
 $(document).ready(function() {

    // With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
    $("#ex6SliderVal").text(slideEvt.value);
});

 $('#keyword').on('input  keyup change', function() {
 var searchKeyword = $(this).val();
 if (searchKeyword.length < 3) {
      $('ul#content').empty()
 }
 if (searchKeyword.length >= 1) {

 $.post('search.php', { keywords: searchKeyword }, function(data) {
 $('#content').empty()
 $('#content').append('<table class="table table-hover"><thead><tr><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody>')

if (data == ""){
     $('#content').append('No hay resultados para su búsqueda') 
}

 $.each(data, function() {


 $('#content').append('<tr><td>'+this.nombre_doctor +'</td><td>'+ this.apellido1_doctor + '</td><td>'+ this.apellido2_doctor+'</td></tr>');


 });
  $('#content').append('</tbody></table>')  
 }, "json");
 }
 });
 });
 </script>

这是用户引入搜索词时的输出：

如图所示，对象未显示在预期列上。

脚本有什么问题？

Answer 1

当您使用字符串调用append时，jQuery构造一个对象并追加它。换句话说，append('<foo>')确实是append($('<foo'>)。此代码中附加追加原始HTML的假设不正确。

你想要像

这样的东西

var $table = $('<table class="table table-hover"><thead><tr><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead></table>').appendTo('#content');
var $tbody = $('<tbody></tbody>').appendTo($table);

$.each(data, function() {
    var $tr = $('<tr>').appendTo($tbody);
    $('<td>').text(this.nombre_doctor).appendTo($tr);
    $('<td>').text(this.apellido1_doctor).appendTo($tr);
    $('<td>').text(this.apellido2_doctor).appendTo($tr);
});
// Nothing with </tbody></table> , those elements already exist

请注意，您当前的代码包含重要的漏洞，因为它允许控制您数据的所有人inject arbitrary HTML and JavaScript into your website。使用text可以避免这种情况。

Answer 2

您使用了一个concate（+）函数，它将所有数据打包成一列作为字符串。您应该定义3个不同的列以强制正确的表格布局。

<table width="100%" rules=groups border="0" cellspacing="0" cellpadding="0" class="table table-hover">
    <colgroup>
        <col width="33%" />
        <col width="33%" />
        <col width="33%" />
    </colgroup>

现在，您有一个可靠的结构来按列插入数据。 <th>
将按照您编写代码的方式排列。

Answer 3

首先尝试将表格html构建为字符串，然后使用jquery的.html（）进行设置。

var htmlContents = "<table><tr><td>First column data</td><td>2nd column
data</td><td>etc</td></tr></table>";
$('#content').html(htmlContents);

应该这样做。