繁体   English   中英

使用jQuery将html表数据转换为表单

[英]convert html table data to form using jQuery

我正在尝试使用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)尝试将此表中的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'" + ']"') + '&format=xml&callback=?';
    jQuery.getJSON(yql, cbFunc);

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

任何帮助深表感谢!

您可以通过这种方式将<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示例

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM