尝试在JavaScript中制作下一步按钮以显示JSON数组

trying to make next button in javascript to display json array

本文关键字：按钮 显示 JSON 数组 下一步 JavaScript      更新时间：2023-09-26

我正在尝试根据某些开始和结束索引显示json数组。我确实显示了所有内容，但是当我单击第一个按钮时，它不起作用。这是我的代码..单击第一个按钮后，它说"this.data is undefined"任何帮助？？

   
   function GridLibrary(data) {
this.data = data;
 }
  GridLibrary.prototype.display = function() {
	var html = [];
	html.push("<table >'n<tbody>");
	html.push("<tr>");
	for ( var propertyNames in this.data[0]) {
		html.push("<th>" + propertyNames + "</th>");
	}
	html.push("</tr>");
	// loop through the array of objects
	for (var i = startIndex; i < endIndex; i++) {
		item = this.data[i];
		html.push("<tr>");
		for ( var key in item) {
			html.push("<td>" + item[key] + "</td>");
		}
		html.push("</tr>");
	}
	html.push("<table>'n</tbody>");
			$('body').append(html.join(""));
};
var grid = new GridLibrary();
$("#first").click(function() {
	//size = parseInt(document.getElementById("listsize").value, 10);
	startIndex = 3;
	endIndex = 6;
	grid.display();
	
});

网格.jsp

<script type="text/javascript">
    var json = [ {
        "id" : 1,
        "name" : "name1",
        "age" : 10,
        "feedback" : "feedback1"
    }, {
        "id" : 2,
        "name" : "name2",
        "age" : 90,
        "feedback" : "feedback2"
    }, {
        "id" : 3,
        "name" : "name3",
        "age" : 30,
        "feedback" : "feedback3"
    }, {
        "id" : 4,
        "name" : "name4",
        "age" : 50,
        "feedback" : "feedback4"
    }, {
        "id" : 5,
        "name" : "name5",
        "age" : 55,
        "feedback" : "feedback5"
    }, {
        "id" : 6,
        "name" : "name6",
        "age" : 68,
        "feedback" : "feedback6"
    }, {
        "id" : 7,
        "name" : "name7",
        "age" : 57,
        "feedback" : "feedback7"
    }, {
        "id" : 8,
        "name" : "name8",
        "age" : 89,
        "feedback" : "feedback8"
    }, {
        "id" : 9,
        "name" : "name9",
        "age" : 65,
        "feedback" : "feedback9"
    }, {
        "id" : 10,
        "name" : "name10",
        "age" : 54,
        "feedback" : "feedback10"
    }, {
        "id" : 11,
        "name" : "name11",
        "age" : 51,
        "feedback" : "feedback11"
    }, {
        "id" : 12,
        "name" : "name12",
        "age" : 97,
        "feedback" : "feedback12"
    } ];
    new GridLibrary(json).display();
</script>

我在这里做了一些假设。

1） 你的构造函数应该接受一个参数，该参数将是你的数据：

function GridLibrary(data){
  this.data = data;
  return this;
}

2）这将像这样使用：

var grid = new GridLibrary(json);

3）然后，您应该将startIndex和endIndex作为参数传递给display()：

grid.display(0, 11);

或

grid.display(3, 6);

并更改方法以接受这些参数：

GridLibrary.prototype.display = function(startIndex, endIndex) {...

4）最后，您应该将HTML（不附加）更改为特定div否则您将覆盖first按钮：

$('#body').html(html.join(""));

演示

仅通过查看您的代码，似乎您没有正确关闭表标记。最后一个html.push添加了一个新的<table>，而不是</table>。它们的顺序也错误，应该</tbody></table>

编辑：固定格式

相关文章：