Манипулирование данными строки с помощью Javascript

Question

У меня есть конкретный вопрос: у меня есть ссылка в таблице в третьем столбце каждой строки, когда пользователь нажимает на эту ссылку, он загружает некоторые ajax и обновляет страницу, что я хочу также сделать заключается в том, что во втором столбце строки, где находится ссылка, измените класс td с false на true и значение «Нет» на «Да».

Спасибо!

Обновление! Пример кода:

Вторая колонка по-прежнему не обновляется при нажатии, возможно, это связано с тем, что div, где находится таблица, скрывается при нажатии на значок? В любом случае, вот что я пробовал:

<tr> 
    <td>00839</td> 
    <td class="false" style="text-align:left;">No</td> 
    <td>  
    <a href="#" 
     onclick="Element.hide('ajax-instruction-view');; 
     new Ajax.Updater('ajax-instruction-view', '/tasks/show_ajax/839', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Appear(&quot;ajax-instruction-view&quot;,{});window.scrollTo(0,0); 
     link = $(link); 
     var row = link.up('tr'); 
     var cell = row.down('td').next('td'); 
     cell.update('Yes');}, 
     parameters: 'authenticity_token='encodeURIComponent('SYWsdBTWlz17u9HmPXA2R9WmBfZn67g/IAMGyhHEwXw=')}); return false;" 
    > 
     Instructions-Notice Board 
    </a> 
    </td> 
    <td>19/04/10</td> 
    <td class="false">21/04/10</td> 
    <td class="false" style="text-align:left;">None.</td> 
</tr> 

Answer 1

Это звучит так, как будто в какой-то момент у вас есть ссылка на ссылку, которую пользователь нажал (либо потому, что у вас есть обработчик click, либо потому, что вы используете делегирование событий и находите его после щелчка по таблице). Начиная со ссылкой на эту ссылку, вы можете использовать DOM обхода вещи Prototype, чтобы найти вторую ячейку таблицы:

Edit на основе ваших ответов на Рахул, я хотел бы изменить свою ссылку onclick на:

onclick="handleLinkClick(this); return false;" 

... и это было бы handleLinkClick:

function handleLinkClick(link) { 

    // Original code (mostly unchanged) 
    Element.hide('currentdiv'); 
    new Ajax.Updater('someajax', 'ajax.html', { 
     asynchronous:true, 
     evalScripts:true, 
     onComplete: function(request) { 
      new Effect.Appear("newdiv",{}); 
      window.scrollTo(0,0); 

      // New code starts here 

      // Extend the link element 
      link = $(link); 

      // Find the row 
      var row = link.up('tr'); 

      // Find the second column 
      var cell = row.down('td').next('td'); 

      // Change the cell's "class" and "value" -- I've had to guess a bit at 
      // what you want to do here 
      if (cell.hasClassName("true")) { 
       cell.removeClassName("true").addClassName("false"); 
       cell.update("No"); 
      } 
      else { 
       cell.removeClassName("false").addClassName("true"); 
       cell.update("Yes"); 
      } 

      // End of new code 
     }, 
     parameters:'authenticity_token=' + encodeURIComponent('SYWsdBTWlz17u9HmPXA2R9WmBfZn67g/IAMGyhHEwXw=') 
    }); 

} 

это использует Element#up, Element#next, Element#hasClassName, Element#addClassName, Element#removeClassName и Element#update; документы для них here.

Дополнительные вещи, чтобы рассмотреть следующие вопросы:

• выше, является хрупким, что если изменить местоположение этой ячейки (сделать его третий столбец, а не второй), он терпит неудачу. Вы можете использовать класс маркера, чтобы найти его.
• Вместо атрибута onclick, вы можете использовать Element#observe.
• Вы можете использовать делегирование событий только для одного обработчика таблицы, а не для обработчика по каждой ссылке.

Но вышеприведенное должно работать.

Answer 2

Я не помню, как писать его в Scriptaculous, но в JQuery было бы:

$(element).click(function(){ 
    // invoke your ajax routine 

    // change class 
    $($(this).parent('tr').children().get(1)).attr('class', 'my-classname'); 
}); 

Может быть кто-то может перевести :-)