преобразование данных таблицы html в форму с помощью jQuery

#php #jquery #yql

#php #jquery #yql

Вопрос:

Я пытаюсь извлечь данные из таблицы на другом веб-сайте, используя YQL, и отобразить данные в форме на моем веб-сайте, используя jQuery. Я успешно извлек данные и отобразил их на своем веб-сайте как есть, однако я не уверен, с чего начать, чтобы поместить данные во входные данные моей формы.

Извлекаемые данные выглядят следующим образом:

 <table>
    <tbody>
        <tr class="">
            <td class="nobr">
                <a href="/player-26164302" title="View player profile">C Borup</a>
            </td>
            <td class="num IP">
                <p>0.2</p>
            </td>
            <td class="num H:pitching">
                <p>2</p>
            </td>
            [...]
        </tr>
    </tbody>
</table>
  

Думаю, на данный момент я могу сделать 1 из 2 вещей.
1) Попробуйте преобразовать теги p в этой таблице во входные данные, но, что не менее важно, мне также нужно было бы применить класс из td ко входным данным.
2) извлеките значение из тега p в таблице и поместите его в существующую форму на основе класса td (возможно ли это?).

Мой jQuery для извлечения и отображения данных выглядит следующим образом:

 jQuery("#bbnuke_retrieve_gamechanger_results_btn_id").bind('click', function() {
    var gameID = jQuery("#bbnuke_plugin_gamechanger_import").val();
    var pitchLink = 'http://www.gamechanger.io/game-'   gameID   '/boxscore/pitching/standard';
    var yql = 'http://query.yahooapis.com/v1/public/yql?q='   encodeURIComponent('select tbody FROM html where url ="'   pitchLink   '" and xpath="//table[@id='   "'tbl_home_pitching'"   ']"')   'amp;format=xmlamp;callback=?';
    jQuery.getJSON(yql, cbFunc);

    function cbFunc(data) {
        if (data.results[0]) {
            data = data.results[0].replace(/<script[^>]*>[sS]*?</script>/gi, '');
            jQuery("#gamesitedump").html(data);
        }
        else {
            jQuery("#gamesitedump").html("Error");
            throw new Error('Nothing returned from getJSON.');
        }
    }
});
  

Любая помощь приветствуется!

Ответ №1:

Вы могли бы «преобразовать» <p> в <input> таким образом :

 $("td > p").each(function() {
    // creates a new <input> element
    $newInput = $("<input type='text'/>");
    // find the parent of the current <p>, and applies its class to the new <input>
    $newInput.addClass($(this).parent().attr("class"));
    // get the value of the current <p>, and set the value of the new <input> to this
    $newInput.val($(this).text());
    // replace the current <p> element with its <input> equivalent
    $(this).replaceWith($newInput);
});
  

Вы можете найти пример jsFiddle здесь .