我需要按照名称属性值对tr
标签进行排序。
在这种情况下是否可以使用sort
方法?
或者有另一种方法可以做到这一点?
我的排序功能位于代码的底部
首先我取输入值并将其附加到其parent()名称attr。之后我需要按名称attr按字母顺序对-s数组进行排序。值。
$(function() {
var tableHead =
"<table>" +
"<tr>" +
"<th class='sort'>Id <span class='downArrow'>↓</span> <span class='upArrow'>↑</span></th>" +
"<th id='sort_name'>Name sort</th>" +
"<th>Surname</th>" +
"<th>Birthday</th>" +
"<th>Filter</th>" +
"<th class='addList'>+</th>" +
"</tr>" +
"</table>";
$('body').html(tableHead);
var inputName = "<input type='text' class='name' placeholder='First name'>";
var inputSurname = "<input type='text' class='surname' placeholder='Surname'>";
var bDayDate = "<input type='date' class='bDayDate' placeholder='Bday'>";
var addList = $('.addList');
var downArrow = $(".downArrow");
var upArrow = $(".upArrow");
var idNum = 0;
var arrNum = [];
var nameArr = [];
var sortedNameArr = [];
var sortedArr = [];
addList.on("click", function() {
idNum++;
var tr = $("<tr></tr>");
for (var i = 1; i <= 6; i++) {
var td = $('<td></td>');
tr.addClass("" + idNum);
switch (i) {
case 1:
td.addClass("" + idNum);
td.html(idNum);
break;
case 2:
td.html(inputName);
break;
case 3:
td.html(inputSurname);
break;
case 4:
td.html(bDayDate);
break;
case 5:
td.html(1);
break;
case 6:
td.html("Delete");
td.addClass('delete');
break;
default:
return console.log("OooPs!!");
}
tr.append(td);
}
arrNum.push(tr);
$('table').append(arrNum);
$('.delete').on("click", function() {
removeItem(this, arrNum, sortedArr);
});
for (var j = arrNum.length; j >= 0; j--) {
sortedArr.push(arrNum[j]);
}
downArrow.on("click", function() {
$('table').append(sortedArr);
$('.delete').on("click", function() {
$(this).parent().remove();
});
});
upArrow.on("click", function() {
$('table').append(arrNum);
});
function removeItem(item, arr, sArr) {
var that = $(item).parent();
$(item).parent().remove();
for (var k = 0; k < arr.length; k++) {
if (arr[k] && that[0] === arr[k][0]) {
arr.splice(k, 1);
} else {
// console.log(that[0]);
// console.log(arr[k][0])
}
}
// If you want delete when sort the table
for (var k = 0; k < sArr.length; k++) {
if (sArr[k] && that[0] === sArr[k][0]) {
sArr.splice(k, 1);
} else {
// console.log("wrong!!")
}
}
}
});
$("#sort_name").on("click", function() {
var name = $(".name");
for (var n = 0; n < arrNum.length; n++) {
var trName = arrNum[n][0];
$(trName).attr("name", $(name[n]).val());
nameArr.push(trName);
// console.log(nameArr[n])
}
nameArr.sort();
for (var n = 0; n < arrNum.length; n++) {
console.log(nameArr[n])
}
});
});
您可以使用以下代码对数据表进行排序管理以调用您的数组单击事件,就像您使用所需字段执行函数调用一样。
function sortTable(table, order) {
var asc = order === 'asc',
tbody = table.find('tbody');
tbody.find('tr').sort(function(a, b) {
if (asc) {
return $('td:first', a).text().localeCompare($('td:first', b).text());
} else {
return $('td:first', b).text().localeCompare($('td:first', a).text());
}
}).appendTo(tbody);
}
could be called on any table like this ther your table may be very by selector.
sortTable($('#mytable'),'asc');
sortTable($('#mytable'),'desc');