Question

我是Javascript的新手，所以我请求你的帮助。

我将一个BLAST搜索的结果保存在arrayref中作为hashrefs。我希望每行旁边都有复选框，并且希望能够保存我选择的任何行。我已经能够添加一个按钮，我最终会用它来优化结果表，但是我无法在结果表中显示复选框。非常感谢任何帮助。

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

}

这是HTML代码。

 <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

尝试

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

Answer 2

您需要在javascript中添加一行，为每个表格行生成<input type="checkbox" />：

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

然后，在HTML中，您需要做两件事：向thead添加一个新的空表格单元格以匹配表格行中的单元格数量，并将整个内容包装在一个形式：

<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>

单击按钮后，表单将通过HTTP POST提交到someurl.php（操作属性）。复选框的值将作为$_POST["items"]中的数组提供。该数组中的值将是行的索引（请注意<input type="checkbox" />我放value="' + this_row_id + '"的方式。我不知道这对您的服务器有多大用处所以，请考虑从服务器传递一些参数，如item.id。

另外一点：为了添加表行，您将向DOM添加大量元素，这是一个缓慢的操作。在构建要作为字符串追加的HTML然后立即添加所有HTML时，您会好得多。像这样：

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

希望这有帮助。

编辑：在最后一个示例中混淆了一些变量，现在修复了。

如何在Javascript中显示每个表行旁边的复选框？

2 个答案: