jQuery两种方法添加数据表格到HTML
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>
jQuery两种方法添加数据表格到HTML的更多相关文章
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- jQuery 两种方法实现IE10以下浏览器的placeholder效果
/* ** jQuery版本:jQuery-1.8.3.min.js ** 测试的浏览器:IE8,IETester下的IE6-IE9** Author:博客园小dee */ placeholder是H ...
- zabbix3.0.4使用shell脚本和zabbix自带模板两种方法添加对指定进程和端口的监控
zabbix3.0.4添加对进程的监控: 方法一:通过自定义命令进行监控 主要思路: 通过 ps -ef|grep sdk-push-1.0.0.jar |grep -v grep|wc -l 这个命 ...
- Android开发12——Andorid中操作数据库的insert的两种方法以及nullColumnHack
一.发现问题 先看两种方法插入数据 public void save(Person p){ SQLiteDatabase db = dbHelper.getWritableDatabase(); db ...
- spark-sql将Rdd转换为DataFrame进行操作的两种方法
SparkConf sparkConf = new SparkConf() .setMaster("local").setAppName("ClzMap"); ...
- js如何实现动态的在表格中添加和删除行?(两种方法)
js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...
- php导出表格两种方法 ——PhpExcel的列子
php常用的导出表格有两种方法,第一种是输出表格,这种方法打开的时候有警告提示,一般导出表格会用phpexcel,这个导出比较灵活,而且还可以设置表格的样式. 第一种导出例子 /** * 执行导出 * ...
- jQuery属性选择器.attr()和.prop()两种方法
在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...
- Linux添加系统调用的两种方法
前言 系统调用的基本原理 系统调用其实就是函数调用,只不过调用的是内核态的函数,但是我们知道,用户态是不能随意调用内核态的函数的,所以采用软中断的方式从用户态陷入到内核态.在内核中通过软中断0X80, ...
随机推荐
- 创建ortools的Dockerfile
技术背景 基于已有的Docker容器镜像,去创建一个本地的镜像,有两种方法:一种是在之前的博客中提到过的,使用docker commit的方案,也就是先进去基础系统镜像内部完成所需的修改,然后comm ...
- 远程拷贝文件--scp
scp [user@host1:]file1 [user@host2:]file2 将主机1下的某一路径下的文件拷贝到另一个主机下的某一路径 scp -r [user@host1:]d ...
- elementui 表格 如何使操作中隐藏一个按钮
<el-table-column label="权限"min-width="100"> <template scope="scope ...
- ElementPlusViteStarterPnpm版本
1 起因 由于最近Vite升级了2.x版本,项目中需要改动的东西有点多,本来想基于官方给出的starter重做,但是又看到了一个叫pnpm的仓库,构建速度会比原生npm/yarn快两倍以上: 因此模仿 ...
- day14.面向对象编程
一 对象的概念 "面向对象"的核心是"对象"二字,而对象的精髓在于"整合" 所有的程序都是由"数据"与"功能& ...
- Day13_64_线程的优先级
线程的调度 * 单核CPU在某一时刻只能执行一条指令,线程只有得到CPU的时间片,也就是使用权,才可以执行指令 * 在单核CPU的机器上线程不是并行运行的,而是频繁切换运行的,只有在多个CPU上线程才 ...
- 利用Apache部署静态网站(二)
本文接着<利用Apache部署静态网站(一)>继续部署,为系统中的每位用户创建一个独立的网站. httpd服务程序提供的个人用户主页功能可以为每位用户创建一个独立的网站.该功能可以让系统内 ...
- Python数据类型之字符串类型
字符串的表示 字符串是Python中最常用的数据类型之一,必须使用成对的引号包围来表示字符串,引号可以是单引号 ' .双引号 " .三引号''' """,格式如 ...
- php swoole 和 websocket的初次碰撞
php swoole 扩展仿佛为php开发打开了一扇窗户 阅读文档 https://wiki.swoole.com php workman和swoole原来是两个东东 swoole的使用范围更广,能做 ...
- 【网络协议】 RPC vs Http