0

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

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

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

2 回答 2

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()
    })
}
于 2013-05-01T05:29:05.760 回答
1

您需要在 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（action 属性）。复选框的值将作为数组在$_POST["items"]. 该数组中的值将是行的索引（注意我是如何<input type="checkbox" />放入的value="' + this_row_id + '"。我不知道这对服务器端有多大用处。因此，还考虑从服务器传递一些参数，例如item.id.

补充一点：为了添加表格行，您将大量元素附加到 DOM，这是一个缓慢的操作。最好将要附加的 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);

希望这可以帮助。

编辑：在上一个示例中混合了一些变量，现在已修复。

于 2013-05-01T05:46:20.243 回答