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中的代码。我不确定Y？

另一件事是，我在点击功能上有一个jquery，它应该在点击锚标记<a id="hide_description_' + assignment.assignment_id和<a id="show_description_' + assignment.assignment_id时触发，这在目前尚未发生。我不知道为什么。我在同一页面中有以下jquery代码。根本没有捕获Click操作。这是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();
  });

});

这是我发现最接近的问题here

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
}

如何使用Jquery

2 个答案: