How can I dynamically print to another table with JQuery/Javascript?
Steve ‘s Questions:
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();
}
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
