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>');

1 行目: #DataRow_2 を含む jQuery オブジェクトを保存します。これは後で使用します。

2 行目: #DataRow_2 のコンテキストで tds を検索し、最後の 2 つ (4.、5.) のみをスライスして削除します。

3 行目: 新しい td を #DataRow_2 に追加します。

更新: 異なるセルを切り取る必要がある場合は、slice() のマニュアル ページを参照してください。slice(-2)明示的に 4. と 5. が必要な場合は、最後の 2 つの要素を取得します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

1行で簡単に実行できます：

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

行のクエリを実行し、インデックス 3より大きい:gt()end()を見つけます。 を呼び出して最初のクエリに戻り、その行に#DataRow_2your を追加します。<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 に答える