Question

问题：我有一张显示大学课程信息的表格。左侧有一列，每行旁边都有一个+号。按下此按钮后，我需要显示有关课程中所有学生的数据（我已准备好这些数据并等待）。但是，如何在屏幕上显示这一新数据？我怎么会再次崩溃呢？

代码：

$(document).ready(function(){
    $.ajax({
      url: 'http://xx.xxx.xxx.xx/getCourses.php',
      dataType: 'jsonp',
      jsonpCallback: "courses",
      success: function( data ) {
          courseData = data;
          drawTable(data);
      }
    });

    $("#dataTable").on('click', '.data-button',function(){   

      /* text change method */
      $(this).text(function( _ , currText){
           return currText === '+' ? '-' : '+';
      });

       /* class change */
       $(this).toggleClass('active');

      /* get data */
       var id= $(this).data('id');

       //Now reveal rows of students under this course.
       var studentData = courseData.courses[id];

      //HOW DO I EXPAND THE EXTRA DATA ROWS ONTO THE TABLE??

  })


});

function drawTable(data) {
    for (var i = 0; i < data.courses.length; i++) {
        drawRow(data.courses[i]);
    }
}

function drawRow(rowData) {
    var button='<anyElement data-id="'+ rowData.id +'" class="data-button">+</anyElement>';
    var row = $("<tr />")
    row.append('<td>'+button+'</td>');/* no need to wrap html in "$()" */

    /* append other cells*/
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.start + "</td>"));
    row.append($("<td>" + rowData.end + "</td>"));
    row.append($("<td>" + rowData.lecturer + "</td>"));

    /* do append to DOM after row created , makes for less DOM insertions*/
    $("#dataTable").append(row);
}

</script>
</head>

<body>
    <table id="dataTable">
        <tr>
            <th>Course</th>
            <th>Start</th>
            <th>End</th>
            <th>Lecturer</th>         
        </tr>
    </table>
</body>
</html>

所需结果的示例：

enter image description here

Answer 1

你的问题没有详细说明学生数据的结构，但是，我试图想出一些东西，只是为了展示一个显示/隐藏切换如何工作。这是一个JSBin：http://jsbin.com/wekepori/1/edit?html,js,output

修改：我已经更新了我的答案，因为问题中提供了有关如何构建学生数据的新信息。请注意，在我的示例中，数据只是一个硬编码字典，因为我没有使用包含数据的服务器后端。因此，必须添加用于检索学生的实际网络调用而不是我的硬编码。

HTML：

<table id="dataTable" border="1">
    <tr>
      <th>Id</th>
      <th>Course</th>
      <th>Start</th>
      <th>End</th>
      <th>Lecturer</th>         
    </tr>
</table>

JavaScript的：

$(document).ready(function(){
//     $.ajax({
//       url: 'http://xx.xxx.xxx.xx/getCourses.php',
//       dataType: 'jsonp',
//       jsonpCallback: "courses",
//       success: function( data ) {
//           courseData = data;
//           drawTable(data);
//       }
//     });

  var data = {
    courses: [{
        id: 1,
        start: 0,
        end: 0,
        lecturer: "Mr. Smith"
      },
      {
        id: 2,
        start: 0,
        end: 0,
        lecturer: "Mr. Boon"
      }]
  };
  var courseData = data;
  drawTable(data);


  $("#dataTable").on('click', '.data-button',function(){   

    var showStudentRow = $(this).text() === '+' ? true : false;
    /* text change method */
    $(this).text(function( _ , currText){
         return currText === '+' ? '-' : '+';
    });

     /* class change */
     $(this).toggleClass('active');

    /* get data */
     var id= $(this).data('id');

     //Now reveal rows of students under this course.
     //var studentData = courseData.courses[id];

    //HOW DO I EXPAND THE EXTRA DATA ROWS ONTO THE TABLE?? see below v v
    var studentData = [{
        id: 23, 
      name: "Joe Bloggs"
      },
      {
        id: 34,
        name: "Marry Brown"
      },
      {
        id: 55,
        name: "Alan James"
      }
    ];

    if (showStudentRow) {
      var trCourseRow = $(this).parent().parent();
      var newStudentRow = addHeaderStudentRow(id, trCourseRow);
      newStudentRow = addStudentRow(id, newStudentRow, studentData[0]);
      newStudentRow = addStudentRow(id, newStudentRow, studentData[1]);
      newStudentRow = addStudentRow(id, newStudentRow, studentData[2]);
    }
    else {
      removeStudentRow(id);
    }

  });
});

function drawTable(data) {
  for (var i = 0; i < data.courses.length; i++) {
      drawRow(data.courses[i]);
  }
}

function addHeaderStudentRow(courseRowId, courseRow) {
  var row = $('<tr></tr>')
    .css('font-weight', 'bold')
    .addClass('student' + courseRowId)
    .append('<td>Student Id</td><td colspan="4">Name</td>');

  row.insertAfter(courseRow);

  return row;
}

function removeStudentRow(courseRowId) {
  $('.student' + courseRowId).remove();
}

function addStudentRow(courseRowId, courseRow, studentRowData) {
  var row = $('<tr></tr>')
    .css('font-weight', 'bold')
    .addClass('student' + courseRowId);

  row.append($('<td>' + studentRowData.id + '</td>'));
  row.append($('<td colspan="4">' + studentRowData.name + '</td>'));

  row.insertAfter(courseRow);

  return row;
}

function drawRow(rowData) {
  var button='<div data-id="'+ rowData.id +'" class="data-button">+</div>';
  var row = $("<tr />");
  row.append('<td>'+button+'</td>');/* no need to wrap html in "$()" */

  /* append other cells*/
  row.append($("<td>" + rowData.id + "</td>"));
  row.append($("<td>" + rowData.start + "</td>"));
  row.append($("<td>" + rowData.end + "</td>"));
  row.append($("<td>" + rowData.lecturer + "</td>"));

  /* do append to DOM after row created , makes for less DOM insertions*/
  $("#dataTable").append(row);
}

如何在屏幕上展开新的表格数据行？

1 个答案: