Javascript для изменения заголовка при нажатии на другой столбец

У меня есть таблица, и после щелчка заголовка в другом столбце я хотел бы сбросить любые другие столбцы, чтобы сказать сортировку. В настоящее время у меня есть:

<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>

Когда я выполняю сортировку в первом столбце, я хотел бы, чтобы он изменил заголовок на восходящий или нисходящий, что он и делает в настоящее время, но если я решу, что хочу сортировать по фамилии, я хочу, чтобы заголовок столбца имени изменился обратно, чтобы отсортировать по имя и не быть восходящим или нисходящим. Как я могу вернуть заголовок измененного заголовка таблицы к значению по умолчанию, когда щелкнут другой заголовок таблицы?


javascript html-table sorting title
person Juan Almonte    schedule 28.01.2012    source источник
comment
возможный дубликат jquery tablesorter изменить заголовок заголовка при сортировке   -  person Mottie    schedule 29.01.2012
comment
возможный дубликат stackoverflow.com/questions/9027508/   -  person Mottie    schedule 29.01.2012

Ответы (2)


arrow_upward
1
arrow_downward

Подхватывая точку зрения Андре о том, что есть более чистые способы, вот код, рефакторинг, чтобы сделать его независимым от количества столбцов и в остальном более общим.

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);
    }
}

проверено в Opera 11.61

Вы могли бы (и действительно должны) пойти дальше, прикрепив обработчик кликов к элементам TH в javascript, а не в HTML.

person Beetroot-Beetroot    schedule 28.01.2012
comment
для микрооптимизации вы можете использовать for(var i=0, len=cells.length; i<len; i++) - person ajax333221; 28.01.2012
comment
не работало, все заголовки оставались отсортированными и никогда не говорили по возрастанию или убыванию - person Juan Almonte; 29.01.2012
comment
Хорошо, я сделал небольшое редактирование - изменил th.parentNode() на th.parentNode (я слишком привык к jQuery; это свойство, а не метод в нативном js). - person Beetroot-Beetroot; 29.01.2012

arrow_upward
1
arrow_downward

в конце функции следует добавить:

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';

Были бы более чистые способы сделать это, но нам пришлось реорганизовать весь код...

person André Alçada Padez    schedule 28.01.2012
comment
Я бы добавил && к троичным условиям: obj.id=='fName'&&firstName.title!='sort by first name', чтобы он обновлялся только при необходимости (неразумно возиться с DOM) - person ajax333221; 28.01.2012
comment
ни один из них не обновляет заголовок при нажатии на другой столбец, они оба говорят по возрастанию, а не по возрастанию, а другой - по возрастанию или по убыванию - person Juan Almonte; 29.01.2012
comment
Вы уверены, что делаете это правильно? Это должно быть внутри функции changeSort, прямо в конце - person André Alçada Padez; 29.01.2012
comment
да, я поставил его прямо в конце после закрывающей скобки для оператора if рождения и перед закрывающей скобкой для функции - person Juan Almonte; 29.01.2012
comment
О, вы можете поместить это в jsfiddle, пожалуйста? - person André Alçada Padez; 29.01.2012