jQuery 1.5 如何用新的表格行单元格查找和替换表格中的 2 个单元格？答案

【问题标题】：jQuery 1.5 How to find and replace 2 cells in a table with a new table row cell?jQuery 1.5 如何用新的表格行单元格查找和替换表格中的 2 个单元格？
【发布时间】：2011-07-12 23:09:30
【问题描述】：

我有一个类似于以下的表格。

<table class="schedule-table" cellspacing="1" border="0" style="width:100%;">  
  <tr class="DataRow" id="DataRow_1">  
    <td class="resource" style="display:none;">8</td>  
    <td class="resource">John Smith</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
  </tr>   
  <tr class="DataRow" id="DataRow_2">       
    <td class="resource" style="display:none;">9</td>  
    <td class="resource">Huck Fin</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
  </tr>   
  <tr class="DataRow" id="DataRow_3">  
    <td class="resource" style="display:none;">10</td>  
    <td class="resource">Tom Sawyer</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
    <td class="resource">blah blah blah</td>  
  </tr>   
</table>

我想选择 #DataRow_2 并将第 4 和第 5 个单元格替换为：

var newTd = <td class="newclass" colspan="2">Stuff for cell that should span two cells</td>

我怎样才能做到这一点？

【问题讨论】：

标签： jquery dom-manipulation dom-traversal

【解决方案1】：

var newTd = <td class="newclass" colspan="2">Stuff for cell</td>

jQuery('#DataRow_2').find('td:last').remove().end().find('td:last').replaceWith(newTd);

【讨论】：

感谢您的意见。我认为您是说要删除最后一个，重新开始并用 newTd 替换新的最后一个？如果是这样，我会丢失原来最后一个的内容
@Bengal：你从来没有在你的问题中提到你需要保留原来的:)。

【解决方案2】：

使用eq 或nth-child 选择器。

【讨论】：

我是 jQuery 新手...你有机会提供一个示例吗？我从 $("#DataRow_2").find('td').eq(3).remove() 开始，但不知道如何完成它
冒着听起来像坏人的风险，您是否阅读了 Mike 链接的文档？我刚刚登陆了这个页面，Mike 的回答对我帮助很大。
@Tass - 很高兴你发现它很有用。你知道他们说什么：你可以把马牵到水边，但你不能让他看说明书。

【解决方案3】：

var $dt=$('#DataRow_2');
$('td', $dt).slice(-2).remove();
$dt.append('<td class="newclass" colspan="2">Stuff for cell that should span two cells</td>');

第一行： 保存一个包含 #DataRow_2 的 jQuery 对象。我们稍后会用到它。

第二行： 在 #DataRow_2 的上下文中搜索 td，仅对最后两个（4.、5.）进行切片并删除它们。

第三行： 将新的 td 附加到 #DataRow_2

更新：如果需要截断不同的单元格，请参考slice() Manual Page。 slice(-2) 会得到最后两个元素，如果你需要明确的 4. 和 5. 你可以写 slice(3,5).

【讨论】：

感谢您的意见。我不认为这会很有效，因为总共有 6 个单元格（一个是隐藏的），我想保留最后一个单元格。这只是一个示例。在我的实际应用程序表中，每个单元格代表一个月中的一天，我需要能够找到并替换跨越一天或多天的单元格，并且保持行中剩余的单元格保持不变
我使用了这个解决方案，因为它很容易调整。查看我的更新。

【解决方案4】：

这应该让你开始：

$(document).ready(function(){
   var $row = $("#DataRow_2").find(".resource");
   $($row[4]).remove();
   $($row[3]).replaceWith($("<td class='newclass' colspan='2'>Stuff for cell</td>"));
});

我假设您有更广泛的用例，因此您需要创建一个函数并传入单元格以删除、替换等。

你可以在这里玩 JSfiddle：http://jsfiddle.net/UV2Ce/

【讨论】：

【解决方案5】：

作为simple as this:

$('#DataRow_2 td:gt(3)')
    .wrapAll('<td class="newclass" colspan="2">Stuff for cell that should span two cells</td>')
    .remove();

【讨论】：

+1 不错的 :) 明天我会回来投票，已经用完了我的每日投票限额 :)。

【解决方案6】：

只需一行即可完成：

$("#DataRow_2").find("td:gt(3)").remove().end().append(newTd);

查询该行，然后找到比索引 3 更大的任何 td :gt()。调用 end() 以返回到 #DataRow_2 的初始查询，然后将您的 <td/> 附加到该行。

jsfiddle 上的示例。

【讨论】：