Question

我有一个特定的问题，我在每行第三列的表格中有一个链接，当用户点击该链接时，他加载一些ajax并更新页面，我想要发生的是在第二列链接所在行的列，将td的类从false更改为true，将值从No更改为是。

谢谢！

更新！代码示例：

第二列仍然没有在点击时更新，也许这是因为表所在的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>

Answer 1

听起来好像在某些时候，你引用了用户点击的链接（因为你有一个click处理程序，或者因为你正在使用事件委托并在点击之后找到它桌子）。从对该链接的引用开始，您可以使用Prototype的DOM遍历内容来查找第二个表格单元格：

修改根据您对rahul的回复，我会将您的链接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');
});

也许有人可以翻译： - ）

使用Javascript操作行数据

2 个答案: