单击另一列时更改标题的Javascript
我有一个表，在点击另一列中的标题后，我想重置任何其他列以表示排序方式。目前我有：单击另一列时更改标题的Javascript,javascript,sorting,html-table,title,Javascript,Sorting,Html Table,Title,我有一个表，在点击另一列中的标题后，我想重置任何其他列以表示排序方式。目前我有： <html> <head> <script> function changeSort(obj) { var firstName = document.getElementById('fName'); var lastName = document.getElementById('lName'); var phoneNumber = document.getEle
<html>
<head>
<script>
function changeSort(obj)
{
var firstName = document.getElementById('fName');
var lastName = document.getElementById('lName');
var phoneNumber = document.getElementById('phone');
var birthDate = document.getElementById('birth');
if(obj.id == 'fName')
{
//alert("fName");
obj.title = (obj.title== 'sort ascending first name') ? 'sort descending first
name' : 'sort ascending first name';
}
if(obj.id == 'lName')
{
//alert("lName");
obj.title = (obj.title== 'sort ascending last name') ? 'sort descending first name' : 'sort
ascending last name';
}
if(obj.id == 'phone')
{
//alert("phone");
obj.title = (obj.title== 'sort ascending phone number') ? 'sort descending phone
number' : 'sort ascending phone number';
}
if(obj.id == 'birth')
{
//alert("birth");
obj.title = (obj.title== 'sort ascending birth date') ? 'sort descending birth
date' : 'sort
ascending birth date';
}
}
</script>
</head>
<body
<table>
<tr>
<th id="fName" onclick='changeSort(this)' title="sort by First Name" >First Name</th>
<th id="lName" onclick='changeSort(this)' title="sort by Last Name" >Last
Name</th>
<th id="phone" onclick='changeSort(this)' title="sort by Phone Number" >Phone
Number</th>
<th id="birth" onclick='changeSort(this)'title="sort by Birth Date" >Birth
Date</th>
</tr>
</table>
</body>
</html>
函数更改排序（obj）
{
var firstName=document.getElementById（'fName'）；
var lastName=document.getElementById（'lName'）；
var phoneNumber=document.getElementById（'phone'）；
var birthDate=document.getElementById（'birth'）；
如果（obj.id==“fName”）
{
//警报（“fName”）；
obj.title=（obj.title=='按升序排列名'）？'按降序排列名'
名称'：'按升序排列第一个名称'；
}
如果（obj.id=='lName'）
{
//警报（“lName”）；
obj.title=（obj.title==“排序升序姓氏”）？“排序降序姓氏”：“排序
升序姓氏'；
}
如果（obj.id=='phone'）
{
//警报（“电话”）；
obj.title=（obj.title=='排序升序电话号码'）？'排序降序电话
号码'：'按升序排列电话号码'；
}
如果（obj.id==‘出生’）
{
//警惕（“出生”）；
obj.title=（obj.title=='排序升序出生日期'）？'排序降序出生
日期“：”排序
上升出生日期'；
}
}
在函数末尾，您应添加：
firstName.title = obj.id == 'fName'? firstName.title : 'sort by first name';
lastName.title = obj.id == 'lName'? lastName.title : 'sort by last name';
phoneNumber.title = obj.id == 'phone'? phoneNumber.title : 'sort by phone number';
birthDate.title = obj.id == 'birth'? birthDate.title : 'sort by birth date';
有更干净的方法可以做到这一点，但我们必须重构整个代码…根据安德烈的观点，有更干净的方法，下面是代码重构，使其独立于列数，或者更一般
function changeSort(th){
var titleTemplates = {
asc: 'sort ascending %s',
desc: 'sort decending %s',
dflt: 'sort by %s'
};
titleTemplates.get = function(key, txt){
var t = this[key] || this.dflt;
return t.replace('%s', txt);
};
var headerRow = th.parentNode;
var cells = headerRow.getElementsByTagName('th');
for(var i=0; i<cells.length; i++){
var c = cells[i];
var s = c.getAttribute('sortCode');
var s_ = (c !== th) ? '' : (!s || s == 'desc') ? 'asc' : 'desc';
c.setAttribute('sortCode', s_);
c.title = titleTemplates.get(s_, c.innerHTML);
}
}
函数更改排序（th）{
变量titleTemplates={
asc:'升序排序%s'，
desc:'排序下移%s'，
dflt:“按%s排序”
};
titleTemplates.get=函数（键，txt）{
var t=this[key]| | this.dflt；
返回t.replace（'%s'，txt）；
};
var headerRow=th.parentNode；
var cells=headerRow.getElementsByTagName（'th'）；
对于（var i=0；iI将&
添加到三元条件中：obj.id='fName'&&firstName.title！='sort by first name'
，因此它只在必要时更新（弄乱DOM是不明智的）当点击另一列时，两个都没有更新标题。他们都说升序不是一个使用排序方式，另一个使用升序或降序。你确定你做得对吗？这必须在thr changeSort函数的末尾。是的，我把它放在birth if语句的结束括号之后和结束之前函数的括号哦，你能把它放在JSFIDLE中吗？为了进行微观优化，你可以使用for（var i=0，len=cells.length；我不工作所有标题都按顺序排序，从不说升序或降序好的，我做了一个轻微的编辑-将th.parentNode（）
更改为th.parentNode
（我太习惯jQuery了；它是一个属性，而不是原生js中的方法）