Question

我写了一个带过滤的jQuery表生成器。问题在于脚本正在创建<tr>，并且他同时关闭</tr>，因此<td>中显示的所有项目均不在其行（<tr>标记）之外。

看起来很不错，因为您不会发现任何区别（至少在Firefox中是这样），但是由于此错误，其他功能也很挣扎（稍后我将基于此表生成CSV，对于拥有<tr>和<td>的良好结构至关重要。

这是我的代码，生成从空行开始，该部分以$("table").empty();开头（此代码之前的所有内容只是格式化数据）。

    $('#js_changeFilterForm').on('submit', function(e){
      e.preventDefault();
      var filters = $('#js_changeFilterForm').serialize(); //gathering filter inputs
      filters = filters.split("=on&"); //cleaning filter array          
      //Array corruption fix prototype
      var ss = [];
      $.each(filters, function(key, value){
        var lol = value;
        ss.push(lol);
      });
      ss = ss.join("=on");
      filters = ss.split("=on");
      filters.splice(-1,1);
      //End of fix prototype
      let data = <?php echo $js_result; ?>; //gathering data

      //Clear and generate new table with filtered data
      $("table").empty();
      $("table").append('<thead> <tr>');
      $.each(filters, function(filter_key, filter_value){
        $("table").append('<th>'+ filter_value +'</th>');
      });
      $("table").append('</tr></thead><tbody>');
      $.each(data["data"], function(key, value){
        $("tbody").append("<tr>");
        $.each(filters, function(filter_key, filter_value){
          $("tbody").append('<td> '+value[filter_value]+'</td>');
        });
      });
    });

生成表后的HTML结果如下：

<table>
 <thead>
   <tr></tr>
 </thead>
 <th> id </th>
 <th> name </th>
 <th> code </th>
 <tbody>
   <tr></tr>
   <td>1</td>
   <td>John</td>
   <td>Hey that's me!</td>
   <tr></tr>
   <td>2</td>
   <td>Nick</td>
   <td>Good guy</td>
 </tbody>

我想我对$.each()有个误会，这就是为什么它生成这样的表的原因，因为我试图将其用作foreach。

谢谢您的帮助。

Answer 1

您要将<tr>添加到<tbody>，然后将<td>添加到相同的<tbody> ...

$("tbody").append("<tr>");
$.each(filters, function(filter_key, filter_value){
  $("tbody").append('<td> '+value[filter_value]+'</td>');
});

您需要创建<tr>并将其存储...然后将<td>添加到<tr> ...

var $td = $("<tr>").appendTo($("tbody"));
$.each(filters, function(filter_key, filter_value){
  $td.append('<td> '+value[filter_value]+'</td>');
});

请注意，我使用的是.appendTo而不是.append，以便它返回新的<tr>元素

jQuery表生成器是追加错误的<tr>标记

1 个答案: