Итерация по таблице позволяет получить значения в каждой строке.Может быть вход или HREF или текст - PullRequest
Новая
       27

Итерация по таблице позволяет получить значения в каждой строке.Может быть вход или HREF или текст

1 голос
/ 17 июня 2011

На одной HTML-странице (From.htm) у меня есть: 

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

На странице вызова (index.htm) у меня есть это: 

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

Мне как-то нужночтобы получить значения, как показано в функции handle для каждого из продуктов, показанных в From.htm.

Имейте в виду, единственное, что я знаю из From.htm, - это имена классов.Я понятия не имею, какие продукты перечислены или каковы входные названия.Эта таблица создана третьей стороной.

Предположим, что index.htm и From.htm находятся на одном веб-сайте.

Ответы [ 2 ]

4 голосов
/ 17 июня 2011

Вот решение, которое работает с данным 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>');
    } );

}

прямо сейчас я просто добавляю его к ul с идентификатором #test ... но вы можете делать с ними все что угоднозначения.

вот скрипка в действии:

http://jsfiddle.net/WdBUs/

0 голосов
/ 17 июня 2011

Я не проверял, но это должно сработать.

ОБНОВЛЕНИЕ: Извините, обработка $ .get была неправильной.Я ожидал получить объект обратно, но это был просто HTML.Лучшее решение - создать временный элемент, вставить в него HTML-код и выполнить обычный поиск с помощью jQuery.Функция ручки остается неизменной. 

$.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"/>
    });
}
...