用Javascript處理行數據

我有一個具體的問題，我在每行第三列的表中有一個鏈接，當用戶點擊那個鏈接時，他加載了一些ajax並更新了頁面，我還想要發生什麼是在鏈接所在行的第二列中，將td的類從false更改爲true，並將值從No更改爲Yes。用Javascript處理行數據

謝謝！

更新！代碼示例：

第二列仍然沒有得到點擊更新，也許這是因爲表所在的div得到隱藏的onclick？反正這裏是我已經試過：

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

來源

2010-04-26 fivetwentysix

你使用的是框架還是隻有原始的JavaScript？ – prodigitalson 2010-04-26 05:08:31

「將td的類從false更改爲true，並將值從No更改爲Yes」。你能解釋一下嗎？ – rahul 2010-04-26 05:10:11

使用默認的JavaScript庫，原型/ Scriptaculous的使用Rails 我聯繫與link_to_remote創建的，但我可以使用原始的JavaScript，以及我在與visual_effect的助手混合它 – fivetwentysix 2010-04-26 05:10:19

它聽起來好像在某些時候，你有一個對用戶點擊的鏈接的引用（要麼是因爲你有一個click處理程序，要麼是因爲你正在使用事件委託並在點擊該表後找到它）。與該鏈接的引用開始，你可以使用Prototype的DOM遍歷的東西，找到第二個表格單元格：

編輯根據您的迴應來拉胡爾，我想你的鏈接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。
您可以使用事件委託在表上只有一個處理程序，而不是每個鏈接上的處理程序。

但上述應該工作。

來源

2010-04-26 05:16:00

謝謝你寫得非常好的答案！ – fivetwentysix 2010-04-26 05:21:09

@fivetwentysix：不用擔心，很高興幫助。 – 2010-04-26 05:25:28

如果可能的話，我需要一點幫助，我不認爲你給我的代碼可以正常工作，我包含了一個更詳細的HTML樣本，看看是否有幫助。 – fivetwentysix 2010-04-26 06:05:16

我不記得怎麼寫的Scriptaculous的，但在jQuery的那就是：

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

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

也許有人能翻譯:-)

來源

2010-04-26 05:15:41 prodigitalson

用Javascript處理行數據

回答

相關問題