Question

I have the following HTML table and want to replace the subtable “class = stock_splitdata” with a text.I am stuck at how to collect the td values of the “stock_splitdata” table and change them to text .

<table>
    <thead>
    <tr>
        <th class="header" align="left" width="200px">STOCK</th>
        <th class="header" align="right" width="90px">CATEGORY</th>
        <th class="header" align="right" width="75px">SALES QTY</th>
        <th class="header" align="right" width="75px">GWP QTY</th>
        <th class="header" align="right" width="120px">SALES DATE</th>
        <th class="header" align="right" width="100px">RECEIPT NO</th>
        <th class="{sorter: 'fancyNumber'} header" align="right" width="120px">GROSS SALES</th>

    </tr>
    </thead>
    <tbody>
    <tr>
              <td align="left" width="200px">
                <table class="stock_splitdata" cellpadding="0" cellspacing="0">
                <tbody><tr>
                    <td width="80px">BM1339</td>
                    <td width="40px">DR2</td>
                    <td width="15px">D</td>
                    <td width="30px">80</td>
                </tr>
                </tbody></table>
              </td>
              <td align="right" width="105px">BRA</td>
              <td align="right" width="85px">1</td>
              <td align="right" width="75px">0</td>
              <td align="right" width="120px">01/10/2012</td>
              <td align="right" width="120px">40756</td>
              <td align="right" width="120px">109.90</td>

              </tr><tr>
              <td align="left" width="200px">
                <table class="stock_splitdata" cellpadding="0" cellspacing="0">
                <tbody><tr>
                    <td width="80px">BM1431</td>
                    <td width="40px">BN</td>
                    <td width="15px">D</td>
                    <td width="30px">80</td>
                </tr>
                </tbody></table>
              </td>
              <td align="right" width="105px">BRA</td>
              <td align="right" width="85px">1</td>
              <td align="right" width="75px">0</td>
              <td align="right" width="120px">01/10/2012</td>
              <td align="right" width="120px">40756</td>
              <td align="right" width="120px">69.00</td>
              </tr>
      </tbody>
      <table>

So that the final values will be as below:

<table>
<thead>
<tr>
    <th class="header" align="left" width="200px">STOCK</th>
    <th class="header" align="right" width="90px">CATEGORY</th>
    <th class="header" align="right" width="75px">SALES QTY</th>
    <th class="header" align="right" width="75px">GWP QTY</th>
    <th class="header" align="right" width="120px">SALES DATE</th>
    <th class="header" align="right" width="100px">RECEIPT NO</th>
    <th class="{sorter: 'fancyNumber'} header" align="right" width="120px">GROSS SALES</th>

</tr>
</thead>
<tbody>
<tr>
          <td align="left" width="200px">
          BM1339 DR2 D 80
          </td>
          <td align="right" width="105px">BRA</td>
          <td align="right" width="85px">1</td>
          <td align="right" width="75px">0</td>
          <td align="right" width="120px">01/10/2012</td>
          <td align="right" width="120px">40756</td>
          <td align="right" width="120px">109.90</td>

          </tr><tr>
          <td align="left" width="200px">
          BM1431 BN D 80
          </td>
          <td align="right" width="105px">BRA</td>
          <td align="right" width="85px">1</td>
          <td align="right" width="75px">0</td>
          <td align="right" width="120px">01/10/2012</td>
          <td align="right" width="120px">40756</td>
          <td align="right" width="120px">69.00</td>
          </tr>
  </tbody>
  <table>

Answer 1

You would need to convert the .stock_splitdata td text to an array, then join it together with a space delimiter, and then replace the .stock_splitdata table.

Something like this:

$(".stock_splitdata").each(function() {
    var $table = $(this);
    var values = $("td", $table).map(function() {
        return $(this).text();
    }).get();
    $table.replaceWith(values.join(" "));
});

Example fiddle