jQuery两种方法添加数据表格到HTML
2024-10-20 16:15:31
jQ创建表格的两种方法
1.模板字符串法
$(function () {
//模板字符串的方式添加到页面
$('#btn').click(function () {
let str = ''
data.forEach(function (value) {
str += `
<tr>
<td>${value.name}</td>
<td>${value.url}</td>
<td>${value.type}</td>
</tr>
`
})
2.push方法
$(function () {
$('#btn').click(function () {
let arr = []
data.forEach(function (value) {
arr.push(`
<tr>
<td>${value.name}</td>
<td>${value.contain}</td>
<td>${value.date}</td>
</tr>
`)
})
let arrStr = arr.join('')
//每一个数组元素都是一个完整的tr/tr
//join拼接数组元素
console.log(arrStr);
$('tbody').html(arrStr)
})
})
HTML结构
<input type="button" value="获取数据" id="btn" />
<br />
<table>
<thead>
<tr>
<th>标题</th>
<th>内容</th>
<th>日期</th>
</tr>
</thead>
<tbody id="j_tbData">
<!-- <tr>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
最新文章
- avalon实现一个简单的带增删改查的成绩单
- Program E-- CodeForces 18C
- CDOJ 1104 求两个数列的子列的交集 查询区间小于A的数有多少个 主席树
- verilog 双向IO实现
- python(进程池/线程池)
- [Swust OJ 893]--Blocks
- JAVA设计模式---模板方法
- rsyslog & syslog详解
- Overview of .rdp file settings
- java Api 读取HDFS文件内容
- springboot 整合 redis 共享Session-spring-session-data-redis
- AWK处理数组
- 【struts2】action中使用通配符
- asp.net core如何修改程序监听的端口
- 利用css制作带边框的小三角
- RHEL 7中有关终端的快捷方式
- 使用CSS更改图标的颜色
- 使用 Qt 获取 UDP 数据并显示成图片（2）
- python获取函数参数默认值的两种方法
- JMeter学习笔记（五） 文件上传接口测试