JvaScript--使用js添加数据,点击按钮,将内容放入表格中
2015-08-16 21:36
696 查看
![](http://img.blog.csdn.net/20150816213453582?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
题目要求:
创建一个Student类,有name、age属性和方法showInfo(),
在页面上显示:
<p>姓名 | 年龄</p>
<div>
</div>
<input type="button" value="显示下一条数据" onclick="show()" />
然后再div中使用js添加数据,每点击一下按钮就显示一条数据,(必须通过p元素去找div)
*其中要写一个函数show()用来调用Student类里面的showInfo()函数
function show() {
var stu = new Stdudent();
stu.showInfo();
}
完整代码如下:
运行结果:
题目要求:
创建一个Student类,有name、age属性和方法showInfo(),
在页面上显示:
<p>姓名 | 年龄</p>
<div>
</div>
<input type="button" value="显示下一条数据" onclick="show()" />
然后再div中使用js添加数据,每点击一下按钮就显示一条数据,(必须通过p元素去找div)
*其中要写一个函数show()用来调用Student类里面的showInfo()函数
function show() {
var stu = new Stdudent();
stu.showInfo();
}
完整代码如下:
<pre class="javascript" name="code"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function Student(name, age) { this.name = name; this.age = age; } Student.prototype.showInfo = function() { var oP = document.getElementById("title"); var pNode = document.createElement("p"); var textNode = document.createTextNode(this.name + "\t|\t" + this.age); pNode.appendChild(textNode); oP.nextSibling.nextSibling.appendChild(pNode); } var count = 0; var stu1 = new Student("张三", 13); var stu2 = new Student("李四", 30); var students = [stu1, stu2]; function show() { if (count < 2) { students[count++].showInfo(); } } </script> </head> <body> <p id="title">姓名 | 年龄</p> <div> </div><!-- hahaha --> <input type="button" value="显示下一条数据" onclick="show()" /> </body> </html>
运行结果:
相关文章推荐
- 45种Javascript技巧大全
- JS设置 cookie,删除 cookie
- 【JavaScript】AJax
- Javascript 基础
- Javascript 基础
- hdu 1874 畅通工程续 dijsktra dijkstra+邻接表 优先队列 bellman-ford bellman-ford队列优化(基础题目,一步步优化)
- 不用js实现背景图片的切换
- JavaScript编程--任意输入一个数判断是不是闰年,数列求和练习
- JS中浏览器兼容性知识
- JS学习十七天----工厂方法模式
- JavaScript删除数组重复元素的5个高效算法
- jsp url传参加密
- jsp页面表单的遍历要怎么写
- dijstra(迪杰斯特拉)算法的简单实现
- JavaScript input file上传前获取文件名、文件类型、文件大小等信息
- 使用js使表单自动提交
- MVC JsonResult的用法
- 转载自--liner_z--knockoutjs介绍
- javascript数字转大写
- JavaScript随机数