我是JQuery / Javascript的初学者,因此,感谢您的帮助。

我有两个脚本/任务。使用JQuery。第一个脚本解析文件并以表格形式报告其内容。第二个脚本的目标是运行分析并在单独的表中显示结果。
第一个任务成功,但是,第二个任务成功地将数据追加到第一个表中,而不是填充第二个表。我在这里想念什么?

file.html

<section id='results'>
  <p><span id='program'>no</span> program used.</p>
  <p><span id='match_count'>0</span> match(es) found.</p>
  <button name="resubmit" id="resubmit" type="submit">Save selected results</button>
  <table>
    <thead>
      <tr>
        <td>Save?</td>
        <td>DB</td>
        <td>Accession</td>
        <td>Description</td>
        <td>Score</td>
        <td>E-value</td>
        <td>Start</td>
        <td>Stop</td>
      </tr>
    </thead>
    <tbody>
      <!-- this will be filled in by javascript when there are results -->
    </tbody>
  </table>
</section>

<section id='dbresults'>
  <p><span id='db_count'>0</span> match(es) found.</p>
  <table>
    <thead>
      <tr>
        <td>Accession</td>
        <td>Description</td>
        <td>Structural</td>
      </tr>
    </thead>
    <tbody>
      <!-- this will be filled in by javascript when there are results -->
    </tbody>
  </table>


file.js

function processJSON( data ) {
// set the span that lists the match count
$('#match_count').text( data.match_count );
// set the span that lists the program used
$('#program').text( data.program );
var next_row_num = 1;
// iterate over each match and add a row to the result table for each
$.each( data.matches, function(i, item) {
        var this_row_id = 'result_row_' + next_row_num++;
        $('<tr/>', { "id" : this_row_id } ).appendTo('tbody');
        $('<td/>', { "text" : item.database } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.accession } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.description } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.score } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.evalue } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.start } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.stop } ).appendTo('#' + this_row_id);
    });
$('#results').show();
}

function processJSON_db( data ) {
$('#db_count').text( data.db_count );
var next_row_num = 1;
$.each( data.dbmatches, function(i, item) {
        var this_row_id = 'result_row_' + next_row_num++;
        $('<tr/>', { "id" : this_row_id } ).appendTo('tbody');
        $('<td/>', { "text" : item.accession } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.description } ).appendTo('#' + this_row_id);
        $('<td/>', { "text" : item.structural } ).appendTo('#' + this_row_id);
    });
$('#dbresults').show();
}

最佳答案

您可以通过在appendTo调用中使用更具体的选择器来解决此问题,而使用当前的html即可。

对于第一个任务:

$('<tr/>', { "id" : this_row_id } ).appendTo('#results tbody');


对于第二项任务:

$('<tr/>', { "id" : this_row_id } ).appendTo('#dbresults tbody');


您可以对此进行很多改进,但是这些简单的更改应该可以解决您的直接问题。

关于javascript - 如何使用JQuery/Javascript动态打印到另一个表?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16409049/

10-12 13:03
查看更多