我编写了一个代码,使用以下代码使用ajax调用填充html表 -
$.ajax({
type: "POST",
url: "my_url",
data: JSON.stringify(result),
async: true,
dataType: "json",
contentType: "application/json; charset= Shift-JIS",
success: function (response) {
glResp = response;
populateTable(glResp);
},
error: function (error) {
console.log(error);
//alert("Error!!");
}
});
数据正确显示在表格上,每行前面都有一个复选框。现在我想显示先检查表中复选框的行,然后显示其余的行。我写了下面的代码,但它似乎没有用。有人可以帮忙吗?
function populateTable(finalObject) {
var obj = finalObject;
var headers1 = ['Name', 'City', 'Job', 'Salary'];
var table = $("<table id='my-table' />");
var columns = headers1;
columns.unshift('');
var columnCount = columns.length;
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
if (i == 0) {
var headerCell = $("<th><input type='button' id='sort'></th>");
row.append(headerCell);
}
else {
var headerCell = $("<th/>");
headerCell.html([columns[i]]);
row.append(headerCell);
}
}
$.each(obj, function (i, obj) {
$row = '<tr><td><input type="checkbox"></td><td>' + obj.Name + '</td><td>' + obj.City + '</td><td>' + obj.Job + '</td><td>' + obj.Salary + '</td></tr>';
table.append(row);
});
var dvTable = $("#dvCSV");
dvTable.html("");
dvTable.append(table);
}
$(function () {
$('#sort').on('click', function () {
var newTable = $('<table class="table"></table>');
$('.my-table').find('tr').each(function ($index, $value) {
if ($(this).find('input[type=checkbox]').is(':checked')) {
newTable.prepend($(this));
} else {
newTable.append($(this));
}
});
$('.table').replaceWith(newTable);
});
});
答案 0 :(得分:0)
你可以这样做。在您执行时循环浏览所有tr
,并在tr
的最后添加未选中checkbox
的{{1}}。
table
$('#dvCSV').on('click', '#sort', function () {
$('#my-table').find('tr:not(:first)').each(function () {
if (!$(this).find(':checkbox').is(':checked'))
$('#my-table').append(this);
});
});