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

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

0 голосов
/ 28 января 2012

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

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

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

Ответы [ 2 ]

1 голос
/ 28 января 2012

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

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

проверено в Опере 11,61

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

1 голос
/ 28 января 2012

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...