使用 Javascript 操作行数据答案

【问题标题】：Manipulating row data with Javascript使用 Javascript 操作行数据
【发布时间】：2010-04-26 05:05:34
【问题描述】：

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

谢谢！

更新！代码示例：

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

【问题讨论】：

你是在使用框架还是只使用原始 javascript？
"将 td 的类从 false 更改为 true，并将值从 No 更改为 Yes"。你能解释一下吗？
将 Rails 与默认的 javascript 库一起使用，Prototype/Scriptaculous 我的链接是使用 link_to_remote 创建的，但我可以使用原始 javascript 以及将它与 visual_effect 助手混合在一起
@rahul 001 否链接

标签： javascript

【解决方案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。

需要考虑的可选事项：

上述内容很脆弱，因为如果您更改该单元格的位置（使其成为第三列而不是第二列），它将失败。您可以使用标记类来查找它。
您可以使用Element#observe，而不是onclick 属性。
您可以使用事件委托在表上只设置一个处理程序，而不是在每个链接上设置一个处理程序。

但以上应该可以工作。

【讨论】：

感谢您写得非常好！
@fivetwentysix：不用担心，很高兴有帮助。
如果可能的话，我需要更多帮助，我认为您给我的代码不能正常工作，我提供了一个更详细的 HTML 示例，看看是否有帮助。
@fivetwentysix：请参阅上面的答案，您希望将所有代码移出onclick 属性并移至script 部分。您现在在答案中引用的代码缺少一个关键位，我们将 this 传递给 handleLinkClick 函数；这就是我们知道点击了哪个链接的方式。您可以使用内联代码（将var link = this; 放在属性中代码的最开始处）来实现，但是将内容分成script 部分会更容易阅读，维护和调试。

【解决方案2】：

我不记得如何在 Scriptaculous 中编写它，但在 jQuery 中应该是：

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

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

也许有人可以翻译:-)

【讨论】：