Javascript 添加+；在桌子上签名，显示更多行_Javascript_Jquery_Html_Jsp_Html Table

Javascript 添加+；在桌子上签名，显示更多行

javascript jquery html jsp

Javascript 添加+；在桌子上签名，显示更多行,javascript,jquery,html,jsp,html-table,Javascript,Jquery,Html,Jsp,Html Table,问题：我对前端开发完全陌生。我已经使用JSONP和AJAX制作了一个包含一些大学课程数据的表格。但是，我需要在每行的开头添加一个新列，默认为+号。单击此按钮时，将打开一组描述课程中所有学生的新数据，并且+变为-。我还看不出最好的办法。有什么建议吗代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

问题：我对前端开发完全陌生。我已经使用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>


请求json测试
$（文档）.ready（函数（）{
$.ajax({
网址：'http://xx.xxx.xxx.xx/getCourses.php',
数据类型：“jsonp”，
jsonpCallback：“课程”，
成功：功能（数据）{
图纸（数据）；
}
});
});
函数绘图表（数据）{
对于（var i=0；i

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

下一部分与前面代码中所做的相同

它对你有帮助吗

<!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>


请求json测试
$（文档）.ready（函数（）{
$.ajax({
网址：'http://xx.xxx.xxx.xx/getCourses.php',
数据类型：“jsonp”，
jsonpCallback：“课程”，
成功：功能（数据）{
图纸（数据）；
}
});
});
函数绘图表（数据）{
对于（var i=0；i

您可以选择更改按钮的内容，或者简单地切换按钮上的类，让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);
}

如果您可以稍微调整一下您的表，那么这可能会帮助您：

js小提琴：

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

这看起来确实很有趣。我现在得到的是“TypeError:$（…）。on不是一个函数”。另外，我认为“calss”应该说“class”？@而且你刚刚注意到你使用的是jQuery（1.5）的旧版本，

$。on（）

不存在then@charlietfljQuery的最新版本是什么？我是否要更改以下行…？-code.jquery.com/jquery-1.5.js“>@AndyA是的，可以在该脚本标记中更改版本，请尝试

1.11.1

。噢！@AndyA谢谢您的更正，或者您可以使用$（…）。单击（），如果你的版本是旧的，这看起来很棒。非常基本的初学者问题…我把第二位代码放在哪里？准备好的处理程序是什么？啊，当然！我知道！对，我现在有一个+和-切换。现在我需要显示新数据…MmmmSo现在我正在尝试如何获取数据。数据已经在“数据”中了我在一开始调用的对象。它只是数据层次结构中更深的一层。但是，由于我缺乏经验，我现在很难访问数据对象。var id=$（this）。数据（'courseId'）；不起作用。数据和id都是空的。你知道为什么吗？取决于数据的外观，我只假设了一个属性

id

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