Iterate through table get values in each row. Could be a input or a href or text

On one HTML Page (From.htm) I have:

<table class="Contents Stylize General">
    <tr>
        <td class="ProductName">
            <a href="http://mysite/products/product1.html">Product 1</a>
        </td>
开发者_开发知识库        <td align="center" class="ItemQuantity">
            <span style="padding: 0; margin: 0;"><input type="text" size="2" name="qty[4df7c1555b822]" id="text_qty_4df7c1555b822" class="qtyInput quantityInput" value="1"/></span>
        </td>
    </tr>

    <tr>
        <td class="ProductName">
            <a href="http://mysite/products/product2.html">Product 2</a>
        </td>
        <td align="center" class="ItemQuantity">
            <span style="padding: 0; margin: 0;"><input type="text" size="2" name="qty[4df7c1555b823]" id="text_qty_4df7c1555b823" class="qtyInput quantityInput" value="4"/></span>
        </td>
    </tr>
</table>

In the calling page (index.htm) I have this:

<script>
    function handle(element) {
        $(element).each(function() {
            var MyHref      = TheHref         //http://mysite/products/product1.html
            var MyHrefInner = TheHrefInner    //Product 1
            var MyQty       = TheQty          //The quantity of <input type="text" size="2" name="qty[4df7c1555b822]" id="text_qty_4df7c1555b822" class="qtyInput quantityInput" value="1"/>
        });
    }

    $(function(){
        var table = $('<table/>');
        table.load('From.htm .Contents.Stylize.General', function(){handle(table);});
    });
</script>

I somehow, need to get the values as shown in the handle function for each of Products shown in From.htm.

Keep in mind the only thing I know from From.htm is the class names. I have no idea what products are listed or what the input names are. This table is generated by a third party.

Assume that index.htm and From.htm are on the same website.

Here's a solution that works with the given html:

function handle(table){
    table.find('tr').each(function(){
        var text = $(this).find('td:first').text();
        var href = $(this).find('td:first a:first').attr('href');
        var qty = $(this).find('td:last input:first').val();
        $('#test').append('<li> text:' + text + '   href: ' + href + '  qty: ' + qty+ '</li>');
    } );

}

right now i'm just appending it to a ul with the id #test... but you can do whatever you like with those values.

here's a fiddle in action:

http://jsfiddle.net/WdBUs/

I haven't tested it, but it should do the trick.

UPDATE: Sorry, the $.get processing was wrong. I was expecting to get an object back, but it was just plain html. The best solution would be to create a temporary element, shove the html into that and do the normal search with jQuery. The handle function remains unchanged.

$.get('From.htm', function(data) { 
    handle($('<div>').html(data).find('table.Contents tr')); 
});

function handle(element) {
    $(element).each(function() {
        var MyHref      = $(this).find('.ProductName').find('a').attr('href');          //http://mysite/products/product1.html
        var MyHrefInner = $(this).find('.ProductName').find('a').text();    //Product 1
        var MyQty       = $(this).find('.ItemQuantity').find('input').val();  //The quantity of <input type="text" size="2" name="qty[4df7c1555b822]" id="text_qty_4df7c1555b822" class="qtyInput quantityInput" value="1"/>
    });
}