如何从每个tr内部的每个td获取文本并在加载时将其附加到div

时间:2014-06-13 20:05:55

标签: jquery html each appendto

我需要从每个tr内部的每个td获取文本并在加载时将其附加到div, 我有一个元素,我想附加一系列&#34;行&#34;使用每行的跨度, 例如:<span class="td's class">each td's text here</span><br>这些文本需要从页面下方的表格中删除。 要在doc load

上附加所有()div.orderDescription

orderDescription阻止附加到

    <div class="four columns pull-left box">
        <p class="orderDescription">
            Description:<br>
          <!-- spans appended here -->  
        </p>
    </div>

获取文本的表格
<div class="simpleCart_items"> <table><thead><tr class="headerRow"><th class="item-name">Name</th><th class="item-thumb"></th><th class="item-price">Price</th><th class="item-decrement"></th><th class="item-quantity">Qty</th><th class="item-increment"></th><th class="item-total">SubTotal</th><th class="item-remove"></th></tr></thead><tbody><tr class="itemRow row-0 odd" id="cartItem_SCI-1"><td class="item-name">Fiber 1234&reg;</td><td class="item-thumb"><img width="100" src="/cb2014-II/img/products/Fiber1234.jpg"></td><td class="item-price">$55.00</td><td class="item-decrement"><a class="simpleCart_decrement" href="javascript:;"><i title="Decrease Qty" class="entypo icon-minus-circled giantText redtext"></i></a></td><td class="item-quantity">2</td><td class="item-increment"><a class="simpleCart_increment" href="javascript:;"><i title="Increase Qty" class="entypo icon-plus-circled giantText greentext"></i></a></td><td class="item-total">$110.00</td><td class="item-remove"><a class="simpleCart_remove" href="javascript:;"><i title="Remove this Item" class="entypo icon-trash giantText redtext"></i></a></td></tr><tr class="itemRow row-1 even" id="cartItem_SCI-3"><td class="item-name">Detox Diet 1234&reg;</td><td class="item-thumb"><img width="100" src="/cb2014-II/img/products/DetoxDiet1234.jpg"></td><td class="item-price">$32.95</td><td class="item-decrement"><a class="simpleCart_decrement" href="javascript:;"><i title="Decrease Qty" class="entypo icon-minus-circled giantText redtext"></i></a></td><td class="item-quantity">1</td><td class="item-increment"><a class="simpleCart_increment" href="javascript:;"><i title="Increase Qty" class="entypo icon-plus-circled giantText greentext"></i></a></td><td class="item-total">$32.95</td><td class="item-remove"><a class="simpleCart_remove" href="javascript:;"><i title="Remove this Item" class="entypo icon-trash giantText redtext"></i></a></td></tr></tbody></table></div>

我找到了其他似乎不起作用的答案。我希望这不是一个重复的问题。我找不到我需要的答案。 我知道这不起作用,但我很难过。请随时帮我解决这个问题。

$("#reviewCart tbody tr").each(function() {
  $(this).find("td").each(function() {
    var class = ("td").attr('class');
    var txt = ("td").text();
    $("<span class='"+class+"'>"+txt+"</span>").appendTo($(".orderDescription"));
  });
});

1 个答案:

答案 0 :(得分:2)

您需要调整很多代码:

$(document).ready(function() {
  $("#reviewCart tbody tr td").each(function() {
    var myclass = $(this).attr('class');
    var txt = $(this).text();
    $("<span class='"+myclass+"'>"+txt+"</span>").appendTo(".orderDescription");
  });
});

class reserved word请勿使用它。

JsFiddle Example

我的Html:

<div id="reviewCart">
  <table>
    <tbody>
      <tr>
        <td>test 1</td>
        <td>test 2</td>
      </tr>
      <tr>
        <td>test 3</td>
        <td>test 4</td>
      </tr>
    </tbody>
  </table>
  <div class="orderDescription">
  </div>
</div>