用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处理行数据

回答

相关问题