0

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

3 回答 3

1

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

对于第一个任务：

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

对于第二个任务：

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

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

于 2013-05-06T23:56:32.190 回答
1

ID 必须是唯一的。但是您的两个函数都在创建带有 IDs 的行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');
于 2013-05-06T23:54:26.023 回答
0

您的行 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);
});

或选择改用类名

于 2013-05-07T00:00:50.693 回答