3

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

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

我怎样才能做到这一点？

4

6 回答 6

4 
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() 手册页。slice(-2)将获得最后两个元素，如果您明确需要 4. 和 5. 您可以编写slice(3,5).

于 2011-03-10T18:56:42.203 回答
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/

于 2011-03-10T18:58:39.143 回答
2

就这么简单：

$('#DataRow_2 td:gt(3)')
    .wrapAll('<td class="newclass" colspan="2">Stuff for cell that should span two cells</td>')
    .remove();
于 2011-03-10T19:00:19.910 回答
1

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

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

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

jsfiddle上的示例。

于 2011-03-10T19:02:01.760 回答
0 
var newTd = <td class="newclass" colspan="2">Stuff for cell</td>

jQuery('#DataRow_2').find('td:last').remove().end().find('td:last').replaceWith(newTd);
于 2011-03-10T18:48:41.907 回答
0

使用eq或nth-child选择器。

于 2011-03-10T18:52:30.020 回答