How can I display checkboxes next to each table row in Javascript?

Question

I'm new to Javascript, so I ask for your help.

I have results from a BLAST search saved in an arrayref as hashrefs. I would like checkboxes available next to each row and would like to be able to save whatever rows I have selected. I've been able to add a button that I will eventually use to refine the results table, but I can't get the checkboxes to show up in the table of results. Any help is much appreciated.

function processJSON( data ) {
// this will be used to keep track of row identifiers
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++;
    // create a row and append it to the body of the table
        /*
          $href->{'database'}=$db[$i];
          $href->{'accession'}=$acc[$i];
          $href->{'description'}=$desc[$i];
          $href->{'score'}=$score[$i];
          $href->{'evalue'}=$evalue[$i];
         */
        $('<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);
    });

    // now show the result section that was previously hidden
    $('#results').show();

}

Here is the HTML code.

 <section id='results'>
  <button name="refine" id="refine" type="submit">Select which results you would like to save</button>
  <table>
    <thead>
      <tr>
        <td>DB</td>
        <td>Accession</td>
        <td>Description</td>
        <td>Score</td>
        <td>E-value</td>
      </tr>
    </thead>
    <tbody>
      <!-- this will be filled in by javascript when there are results -->
    </tbody>
  </table>
</section>

Answer 1

You will need to add a line to your javascript to produce an <input type="checkbox" /> for each table row:

$.each( data.matches, function(i, item) {
    var this_row_id = 'result_row_' + next_row_num++;
    // create a row and append it to the body of the table
    /*
      $href->{'database'}=$db[$i];
      $href->{'accession'}=$acc[$i];
      $href->{'description'}=$desc[$i];
      $href->{'score'}=$score[$i];
      $href->{'evalue'}=$evalue[$i];
     */
    $('<tr/>', { "id" : this_row_id } ).appendTo('tbody');

    // This is the checkbox input cell
    $('<td><input type="checkbox" name="items[]" value="' + this_row_id + '" /></td>')

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

// now show the result section that was previously hidden
$('#results').show();

Then, in your HTML, you will need to do two things: add a new empty table cell to the thead in order to match the number of cells in your table rows, and wrap the whole thing in a form:

<section id='results'>
  <form method='POST' action='someurl.php'>  
    <button name="refine" id="refine" type="submit">Select which results you would like to save</button>
    <table>
      <thead>
        <tr>
          <!-- Extra blank table cell in header -->
          <td></td>
          <td>DB</td>
          <td>Accession</td>
          <td>Description</td>
          <td>Score</td>
          <td>E-value</td>
        </tr>
      </thead>
      <tbody>
        <!-- this will be filled in by javascript when there are results -->
      </tbody>
    </table>
  </form>
</section>

After clicking the button, the form will be submitted via HTTP POST to someurl.php (the action attribute). The values of the checkboxes will be available as an array in $_POST["items"]. The values in that array will be the indices of the rows (note how in the <input type="checkbox" /> I put value="' + this_row_id + '". I don't know how useful this will be do you server-side. So, consider also passing some parameter from the server like item.id.

---

An additional point: in order to add the table rows, you are appending a lot of elements to the DOM, a slow operation. You would be much better off building the HTML you want to append as a string and then adding it all at once. Something like this:

var tbodyContents = '', trContents;
$.each( data.matches, function(i, item) {
    var this_row_id = 'result_row_' + next_row_num++;
    trContents = '<tr id="' + this_row_id + '">';
    trContents += '<td><input type="checkbox" name="items[]" value="' + this_row_id + '" />'
    trContents += '<td>' + item.database + '</td>';
    trContents += '<td>' + item.accession + '</td>';

    // ... and so on for the rest of the item fields

    trContents += '</tr>';
    tbodyContents += trContents;
} );
// Now tbodyContents is a string containing a bunch of <tr> tags.
// Append it all at once to the <tbody>, causing only 1 DOM re-rendering
$('tbody').append(tbodyContents); // or $('tbody').html(tbodyContents);

Hope this helps.

---

Edit: mixed up some variables in the last example, fixed now.

Answer 2

Try

function processJSON( data ) {
    // this will be used to keep track of row identifiers
    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++;
        // create a row and append it to the body of the table
        /*
          $href->{'database'}=$db[$i];
          $href->{'accession'}=$acc[$i];
          $href->{'description'}=$desc[$i];
          $href->{'score'}=$score[$i];
          $href->{'evalue'}=$evalue[$i];
         */
        var tr = $('<tr/>', { "id" : this_row_id } ).appendTo('tbody');
        $('<td><input type="checkbox" /></td>').appendTo(tr);
        $('<td/>', { "text" : item.database } ).appendTo(tr);
        $('<td/>', { "text" : item.accession } ).appendTo(tr);
        $('<td/>', { "text" : item.description } ).appendTo(tr);
        $('<td/>', { "text" : item.score } ).appendTo(tr);
        $('<td/>', { "text" : item.evalue } ).appendTo(tr);
    });

    // now show the result section that was previously hidden
    $('#results').show();

}

function getSeletedItems (){
    var selected = $('tbody tr').has(':checkbox:checked').map(function(index, el){
        return $(this).find('td:eq(1)').text()
    })
}