How can I dynamically print to another table with JQuery/Javascript?

Question

I am a beginner in JQuery/Javascript, so I appreciate any help in advance.

I have two scripts/tasks. Using JQuery. the first script parses a file and report its contents in table form. The goal of the second script is to run an analysis and display results in a separate table. The first task is successful, however, for the second task, instead of populating the second table, the data appends to the first table. What am I missing here?

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

If you create your html as strings and append everything at once (after the loop) you can improve speed by like 1000%. — elclanrs
– elclanrs, Commented May 6, 2013 at 23:49
I would totally do that if it wasn't for several AJAX calls for several for data analysis. Using JQuery makes it so much more organized for me. — Steve
– Steve, Commented May 6, 2013 at 23:50
I'm not saying to get rid of jQuery, just to append all at once as a big string. It doesn't seem like you really need to create 8 jQuery objects on each iteration, you can do this as well and it's totally readable: html += '<td>'+ item.database +'</td>' — elclanrs
– elclanrs, Commented May 6, 2013 at 23:53

joshuahealy · Accepted Answer · 2013-05-06 23:56:32Z

1

You can fix this by using a more specific selector in your appendTo calls, with your current html this would suffice...

For the first task:

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

and for the second task:

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

There are a lot of improvements you could make to this but those simple changes should fix your immediate problem.

answered May 6, 2013 at 23:56

joshuahealy

3,57924 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Over a year ago

Ah, thought I had to append it together #dbresults.tbody ; appreciate the clarification.

joshuahealy Over a year ago

#dbresults.tbody means "elements with an id of dbresults and a class of tbody". You need a space to select descendants and if you want to select tag names you don't use a dot, that's used for classes.

Steve Over a year ago

Ah gotcha. Coming from scripting in Perl, this is quite a learning experience. Thanks for the clarification.

Barmar · Accepted Answer · 2013-05-06 23:59:29Z

1

IDs have to be unique. But both of your functions are creating rows with IDs result_row_<row_number>. In the second function, change it to:

var this_row_id = 'dbresult_row_' + next_row_num++;

The other problem is that you're not specifying which table to append the table to.

.appendTo('tbody')

selects the first table in the DOM, you need to identify it:

.appendTo('#dbresults tbody')

Even better, don't bother assigning IDs to the rows. You can do:

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

edited May 6, 2013 at 23:59

answered May 6, 2013 at 23:54

Barmar

789k57 gold badges554 silver badges669 bronze badges

3 Comments

Steve Over a year ago

Ah, I missed the space. Thought I had to append it #dbresults.tbody; appreciate the short hand alternative.

Barmar Over a year ago

You don't have #dbresults.tbody in your code, you just have tbody. I think you need to go reread a tutorial on CSS selectors.

Steve Over a year ago

I took it out because it didn't work. But yea, I have a lot of learning to do.

Starx · Accepted Answer · 2013-05-07 00:00:50Z

You have ambiguous row ids. IDs always have to be unique. If you must use common name between rows of two tables use class or else you have use a different row id.

Here are the illustration of both methods.

Using Unique ID:

var this_row_id = 'table_2_result_row_' + next_row_num++;

Differentiate your row id like above

Class:

$.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);
});

or Choose to use class names instead

Collectives™ on Stack Overflow

How can I dynamically print to another table with JQuery/Javascript?

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related