Javascript에서 각 테이블 행 옆에 확인란을 표시하려면 어떻게해야합니까?

Question

저는 Javascript에 익숙하지 않으므로 귀하의 도움을 요청합니다.

BLAST 검색 결과가 배열 참조에 hashref로 저장되어 있습니다. 각 행 옆에 확인란을 사용할 수 있으며 내가 선택한 행을 저장할 수 있기를 원합니다. 나는 결국 결과 테이블을 수정하는 데 사용할 버튼을 추가 할 수 있었지만 결과 테이블에 체크 박스를 표시 할 수는 없습니다. 어떤 도움이라도 대단히 감사합니다.

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

이 이 에게

Answer 2

이

당신은 각 테이블 행에 대한 <input type="checkbox" />을 생산하기 위해 자바 스크립트에 줄을 추가해야합니다

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

보십시오 :

$.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을 구축 오프 더 나은 것 문자열을 한 번에 모두 추가하십시오. 다음과 같이 입력하십시오.

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

희망이 도움이됩니다.

---

편집는 지금 고정 마지막 예제에서 몇 가지 변수를 혼합.