Question

问题：我对前端开发完全陌生。我已经设法使用JSONP和AJAX创建了一些关于大学课程数据的表格。但是，我需要在每行的开头添加一个新列，默认为+号。单击此按钮时，将打开一组描述课程中所有学生的新数据，+变为 - 。我还看不到最好的办法。有什么建议吗？

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request json test</title> 
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="json-jquery.js" type="text/javascript"></script> 
<script type="text/javascript">

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

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

function drawRow(rowData) {
    var row = $("<tr />")
    $("#dataTable").append(row);
    row.append($("<td>" + rowData.courseName + "</td>"));
    row.append($("<td>" + rowData.start + "</td>"));
    row.append($("<td>" + rowData.end + "</td>"));
    row.append($("<td>" + rowData.lecturerName + "</td>"));
}

</script>
</head>

<body>
    <table id="dataTable">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </table>
</body>
</html>

Answer 1

您可以选择更改按钮的内容，或者只需在其上切换课程，然后让css更改视觉显示。将公共类应用于元素以简化事件绑定选择。

我会添加一个数据属性，其中包含下次申请学生数据所需的课程标识。

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

    /* append other cells*/

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

然后在准备好的处理程序中为按钮添加事件处理程序。在事件处理程序this中引用当前实例。

$("#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('courseId');
     /* make api call based on id*/

})

Answer 2

我添加了一些代码，可以执行将+转换为 - 部分的功能。

下一部分与之前代码中的内容相同。

它对你有帮助吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request json test</title> 
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="json-jquery.js" type="text/javascript"></script> 
<script type="text/javascript">

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

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

function drawRow(rowData) {
    var row = $("<tr />");
    var $td = $("<td class='clickTd'>+</td>")
        .on('click', tdClickEvent);
    row.append($td);
    row.append($("<td>" + rowData.courseName + "</td>"));
    row.append($("<td>" + rowData.start + "</td>"));
    row.append($("<td>" + rowData.end + "</td>"));
    row.append($("<td>" + rowData.lecturerName + "</td>"));

    $("#dataTable").append(row);
}

function tdClickEvent(){
    $(this).text('-');
    /*
    the student show function
    */
}

</script>
</head>

<body>
    <table id="dataTable">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </table>
</body>
</html>

Answer 3

如果您可以稍微改造一下您的桌子，那么这可能只对您有所帮助：

js小提琴：的 http://jsfiddle.net/thecbuilder/8bm5T/1/

$("#mainTable").on("click", ".collapse", function () { var txt = $(this).text(); if (txt === "+") { $(this).parent().next().show(); $(this).text("-"); } else { $(this).parent().next().hide(); $(this).text("+"); } });

向表中添加+符号，显示更多行

3 个答案: