使用jQuery用文本替换子表值

时间:2012-10-12 09:15:16

标签: jquery

我有以下HTML表格,想要用文本替换子表“class = stock_splitdata”。我坚持如何收集“stock_splitdata”表的td值并将其更改为文本。

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

以便最终值如下:

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

1 个答案:

答案 0 :(得分:0)

您需要将.stock_splitdata td文本转换为数组,然后将其与空格分隔符连接在一起,然后替换.stock_splitdata表。

这样的事情:

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

Example fiddle