如何使用Jquery向動態創建的表中添加新的TR

Question

我有一個使用perl，javascript和jquery構建的舊項目，其中有一個JavaScript函數，需要更改以使用Jquery添加額外的html。 這是我功能的現有代碼。

 function _buildAssignmentRow(assignment) { // assignment is just an array var $checkbox = $('<input type="checkbox" name="assignment_ids"/>') .attr('data-id', assignment.course_section_id) .val(assignment.assignment_id) .addClass('checkAssignment'); var show_assignment_desc = '<br><a id="show_description_' + assignment.assignment_id + '">Show Description</a>'; return $('<tr id="assignment_' + assignment.assignment_id + '" class="listRow listRowShow"></tr>') .attr('data-complete', assignment.complete) .attr('data-expected-submission', assignment.roster_count) .attr('data-name', assignment.name) .attr('data-description', assignment.description) .append($('<td></td>').addClass('list_item_tint_off').append($checkbox)) .append($('<td></td>', { title: assignment.name }).addClass('assignment_name nowrap').html(assignment.name.truncate(35) + show_assignment_desc)) .append($('<td></td>', { title: assignment.course_code + '-' + assignment.course_section_code }).addClass('nowrap').html(assignment.course_code + '-' + assignment.course_section_code)) .append($('<td></td>').addClass('align-center').html((assignment.date_assigned || '-'))) .append($('<td></td>').addClass('align-center').html((assignment.date_due || '-'))) .append($('<td></td>').addClass('align-center').html(assignment.assignment_status)) .append($('<td></td>', { title: template.actual_expected }).addClass('align-center') .html(assignment.complete + ' / ' + assignment.roster_count)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

我現在需要在同一函數中添加一個額外的表行。 需要包含的新HTML代碼如下所示。

 var assignment_desc = '<tr style="display:none;" id="description_' + assignment.assignment_id + ' "><td colspan="6">' + assignment.description + '<br><a id="hide_description_' + assignment.assignment_id + ' ">Hide Description</a></td></tr>'; 

所以我嘗試了幾種方法，例如..將HTML代碼分配給變量說

var existing_HTML = $('<tr id="assignment_' + assignment.assignment_id + '" class="listRow listRowShow"></tr>'). . . .html(assignment.complete + ' / ' + assignment.roster_count)); return existing_HTML + assignment_desc;

這種方法行不通。 existing_HTML中的代碼被錯過了。 前端僅顯示Assignment_desc中的代碼。 我不確定是嗎？

另一件事是，我有一個單擊函數的jquery，應該在錨標記<a id="hide_description_' + assignment.assignment_id和<a id="show_description_' + assignment.assignment_id <a id="hide_description_' + assignment.assignment_id的單擊時觸發現在。 我不知道為什么。 我在同一頁面中存在以下jquery代碼。 根本不會捕獲“點擊”操作。 這是Jquery代碼。

 jQuery(document).ready(function() { jQuery('a[id^="show_description_"]').on('click', function() { var show_desc_id = jQuery(this).attr("id"); var cur_asg = show_desc_id.split('_'); //show_description_636148 var assignment_id = cur_asg[2]; var desc_id = 'description_' + assignment_id; jQuery('tr#' + desc_id).show(); jQuery(this).hide(); }); jQuery('a[id^="hide_description_"]').on('click', function() { var show_desc_id = jQuery(this).attr("id"); var cur_asg = show_desc_id.split('_'); //hide_description_636148 var assignment_id = cur_asg[2]; var desc_id = 'description_' + assignment_id; jQuery('tr#' + desc_id).hide(); var desc_hide = 'show_description_' + assignment_id; jQuery('#' + desc_hide).show(); }); }); 

這是我在這里找到的最接近的問題

Answer 1

// Append new table body row
var newrow = $("<tr>").appendTo("#tableid tbody");

Answer 2

就像先前的回答所說，這很容易。 您需要做的就是這樣：

var myRow = $("<tr />");
var myTable = $("#myTable");
myTable.append(myRow);

如果您需要更強大的功能，那么您需要在行中添加列，然后就可以了。

這可以移植到像這樣的功能

function createRows(numColumns){
    var myRow = $("<tr />");
    var myTable = $("#myTable");

    for(i=0; i<numColumns; ++i){
        myRow.append( $("<td />") );
        //some more could be done here, maybe column content?
    }

    myTable.append(myRow);
    return myRow.html(); //this will return the whole html generated by this function
}