Question

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.

Answer 1

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/