Question

I am stuck with the problem of table expanding. I am populating data into a table, and the last column of the table has more content in it, So using jquery is to possible to get all the text in the last column of a table row, append the details into the next row ? Why i am trying this weird thing is to use jQuery table expand plugin… any tips.. please post…

Sample table data before jQuery manipulation

<table width="700" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>001</td>
        <td>Name</td>
        <td>1210 W. Valley Dr, Los Angeles, 91742</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Name</td>
        <td>PO BOX 1719, Chicago, 60608</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Name</td>
        <td>RR 3 BOX 78, Kaufman, 75142</td>
      </tr>
    </table>

Result table data after jQuery manipulation

<table width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>001</td>
    <td>Name</td>
    <td>View</td>
  </tr>
  <tr>
    <td colspan="3">1210 W. Valley Dr, Los Angeles, 91742</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Name</td>
    <td>View</td>
  </tr>
  <tr>
    <td colspan="3">PO BOX 1719, Chicago, 60608</td>
  </tr>
  <tr>
    <td>003</td>
    <td>Name</td>
    <td>View</td>
  </tr>
  <tr>
    <td colspan="3">RR 3 BOX 78, Kaufman, 75142</td>
  </tr>
</table>

Answer 1

jQuery has 50 million ways to do one task, but this will do what you want:

$(function(){
    $('table tr td:nth-child(3)').each(function(){                
        var $this = $(this);
        $this.clone().attr('colspan', 3)
             .wrap('<tr></tr>').parent().insertAfter($this.parent());
        $this.text('View');
    })
})

This clones the original td, wraps it in a tr and inserts it after the parent of the original td. Finally, it resets the text to View