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

Question

I need to fetch the text from each td inside of each tr and append it to a div on load, I have an element that I want to append a series of "rows" to using spans for each row, for example: <span class="td's class">each td's text here</span><br> these pieces of text need to be fished out of a table further down the page. To be appendTo() div.orderDescription all on doc load

orderDescription Block to appended to

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

The table to get the text from

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

I have found other answers that do not seem to work. I hope this is not considered a duplicate question. I could not find the answer I need already posted. I know this does not work but I am stumped. Please feel free to help me out on this one.

$("#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"));
  });
});

Answer 1

You need to adjust a lot of your code:

$(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 is a reserved word don't use it.

JsFiddle Example

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