我编写了一个带有过滤功能的小型 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.
感谢您的任何帮助。
您正在向<tr>the添加 a<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>');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句