Question

我是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();
}

Answer 1

ID必须是唯一的。但是，您的两个函数都在创建ID为result_row_<row_number>的行。在第二个函数中，将其更改为：

var this_row_id = 'dbresult_row_' + next_row_num++;

另一个问题是你没有指定将表附加到哪个表。

.appendTo('tbody')

选择DOM中的第一个表，您需要识别它：

.appendTo('#dbresults tbody')

更好的是，不要为行分配ID。你可以这样做：

$('<tr/>').append('<td/>', { text: item.accession } )
          .append('<td/>', { text: item.description } )
          .append('<td/>', { text: item.structural } )
          .appendTo('#dbresults tbody');

Answer 2

您可以通过在appendTo调用中使用更具体的选择器来解决此问题，使用当前的html，这就足够了......

第一项任务：

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

和第二项任务：

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

您可以对此做出许多改进，但这些简单的更改应该可以解决您当前的问题。

Answer 3

你有不明确的行ID。 ID必须始终是唯一的。如果必须在两个表的行之间使用公用名，请使用类，否则您使用不同的行ID。

以下是两种方法的说明。

使用唯一ID：

var this_row_id = 'table_2_result_row_' + next_row_num++;

区分您的行ID，如上所述

类别：

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

或选择使用类名

如何使用JQuery / Javascript动态打印到另一个表？

3 个答案: