动态通过js脚本构造html页面


下面的例子是使用jquery,实现动态构造html页面的代码

<!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>Personal Information</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
  
<script type="text/javascript" language="javascript">
    //动态添加表格的行数
    $(function()
    {
        var i=0;
        for(i=0;i<100;i++)//这里循环100次
        {
           $("<tr />").append("<td>陈希章</td><td>100< /td>").appendTo("#contents");//每一次都增加一个tr的标记,里面包含两个td标记,最后将其追加到表格中去(通过id定位)
        }
    });
</script> 
</head> 
<body>
<table id="contents">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
</table> 
</body> 
</html> 

  运行起来的效果如下

  这样看起来很不错的, 但如果那个行比较复杂,则构造起来挺麻烦的。我们还可以利用模板的方式来做,如下

<!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>Personal Information</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" language="javascript">
    //动态添加表格的行数
    $(function()
    {
        var i=0;
        for(i=0;i<100;i++)
        {
            //$("<tr />").append("<td>陈希章</td><td>100</td>").appendTo("#contents");
           var row=$("#template").clone();//从模板复制一行
            row.find("#name").text("陈希章");
            row.find("#age").text("100");
            row.attr("id","data");
            row.appendTo("#contents");
        }
    }); 
</script> 
</head> 
<body>
<table id="contents">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr id="template">
        <td id="name"></td>
        <td id="age"></td>
    </tr>
</table> 
</body> 
</html> 



相关阅读:
MYSQL5 masterslave数据同步配置方法
笔记本上安装freebsd的小知识
迅速删除非法文件名的批处理代码
将部分数据导出后导入一个统一数据库
简述CSS透明技巧(总结)
Win7 安装软件时无法连接sql server解决方法
使用xmlHttp结合ASP实现网页的异步调用
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
JS 动态添加列表框项效果代码
高亮显示web页表格行的javascript代码
可以拖动的div 实现代码
Windows 2003系统网络负载均衡的实现
一个查看ASP的javascript程序
php将数据库导出成excel的方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 我爱冬青作文300字 09年醉了的情人节 感恩亲人作文 2015合作建房合同范本 书包作文100字 校庆的作文 今天我很高兴作文400字 一颗平常的心 大学生求职十大误区 贩卖内衣的小女人 自重 会有天使替我来爱你 第一节 五章 最全龙应台经典语录 无私的师爱 我是野生的湿润植物 先左后右作文700字 黑马 加快发展非公有制经济的调查与思考 安全卫生管理制度 算命不要相信 随便写写,一点心情作文350字 我的六年级作文300字 财政局依法理财半年工作小结 宫崎骏语录精选集 阅读时间 遇见你是我最美丽的邂逅 校园作文:美丽的校园 新员工制作好简历的技巧 我多姿多彩的老师们作文600字 此文祭奠我的奶奶...愿她在另一个世界过得好。。。 小学校长当选党支部书记上任演说 苏教版七年级上学期第五单元综合检测与评价 我的春节作文500字 激励运动会加油稿 美丽的棋盘滩 当你提出上床要求后,各种女人的回答! 妖缘(转载)作文3000字 月亮的诗歌 教师节英文祝福语 初中初二作文750字:妈妈,我想对你说 难忘的中秋节100字作文:传统节日-中秋节 初中初一作文450字:妈妈我爱你 金蝉脱壳作文 小学五年级作文450字:大米 建筑参观实习报告 远方飘来一朵祥云 《云中歌》经典台词句子对白大全 最聪明的五个搭讪手段 中学生学生会竞选演讲稿 2014年度幼儿园教师个人工作总结-教师工作总结_教师工作总结

Copyright © 2016 phpStudy |