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"/>
});
}
精彩评论