Question

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

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

我该如何做到这一点？

Answer 1

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的上下文中搜索tds，仅切片最后两个（4.，5。）并删除它们。

第三行： 将新td追加到#DataRow_2

更新：如果您需要切断不同的小区，请参阅slice() Manual Page。 slice(-2)将获得最后两个元素，如果您需要明确指出4.和5.您可以编写slice(3,5)。

Answer 2

这应该让你开始：

$(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/

Answer 3

作为simple as this：

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

Answer 4

可以简单地在一行中完成：

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

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

jsfiddle上的示例。

Answer 5

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

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

Answer 6

使用eq或nth-child选择器。

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

6 个答案: