第11章 jQuery（下）-补充案例.docVIP

第8章 JavaScript编程基础 PAGE 2 PAGE 11 第11章补充案例 【案例11-1】 生成表格 一、案例描述 考核知识点 push()方法、html()方法、join()方法、for循环数组元素 练习目标 掌握如何使用push()方法数组添加元素 掌握如何使用html()方法操作元素的内容（HTML结构） 掌握如何使用join()方法将数组元素转换成字符串 需求分析 生成表格就是将数据添加到页面的表格元素中，主要的实现思路是点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr。 案例分析 效果如图11-1所示。 初始状态 生成表格 具体实现步骤如下： 模拟从后端拿到的数据 循环data数组，操作每一个元素 给获取数据按钮设置一个点击事件 创建tr标签元素 每一个元素又是一个对象,所以对象有多少个键值对就有多少个td 设置内容，生成表格结构 二、案例实现 根据上面的分析，编写HTML页面结构，具体代码如下： !DOCTYPE html html lang=en head meta charset=UTF-8 title生成表格/title /head script?src=jquery-1.12.4.js/script body input?type=button?value=获取数据?id=j_btnGetData?/ tab