如何使用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
}