2011-05-09 81 views
0

我试图从使用YQL的另一个网站上的表格检索数据,并使用jQuery在我的网站上的表单中显示数据。我已经成功地检索数据并将其显示在我的网站上,但是,我不确定从哪里开始将数据放入我的表单输入。将html表格数据转换为使用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'" + ']"') + '&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.'); 
     } 
    } 
}); 

任何帮助,非常感谢!

回答

2

你可以 “转换” 的<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 example here