Geek asks and answers

JQuery 1.5 How to find and replace 2 cells in a table with a new table row cell?

I have a table similar to the following.

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

I would like to select # DataRow_2 and replace the 4th and 5th cells as follows:

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

How can i do this?

+3
source share
6 answers

This should help you:

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

I assume that you have a wider precedent, so you want to make a function and pass to cells for deletion, replacement, etc.

You can play with JSfiddle here: http://jsfiddle.net/UV2Ce/

+4
source 
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>');

First line: Saves a jQuery object containing # DataRow_2. We will use it later.

: tds # DataRow_2, (4., 5.) .

: td # DataRow_2

UPDATE. , slice() Manual Page. slice(-2) , 4 5. slice(3,5).

+4

:

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

:

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

, td : gt(), 3. end(), #DataRow_2 <td/> .

jsfiddle.

+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);
0

eq nth-child .

0

More articles:


All Articles