js动态拼接数据表格Table

最新推荐文章于 2023-04-23 15:25:48 发布
最新推荐文章于 2023-04-23 15:25:48 发布
阅读量2.1k 收藏 5
点赞数
分类专栏： 前端 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54366356/article/details/113346375
版权 
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
		<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
	</head>
	<body>
		<div class="layui layui-col-md12">
			<table class="layui layui-table">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
					</tr>
				</thead>
				<tbody class="tbody">

				</tbody>
			</table>
		</div>

	</body>
</html>

<script>
	var html = ""
	for (var i = 0; i < 10; i++) {
		html += "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + '小明' + "</td>" + "<td>" + '男' + "</td>" + "<td>" + 23 +
			"</td>" + "</tr>"
	}
	document.querySelector(".tbody").innerHTML = html;
</script>

效果图

Eason_Lou
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现点击Radio动态更新table数据
12-10
本示例中，我们看到如何通过监听Radio按钮的点击事件来动态更新表格（table）中的数据。以下是对这个例子的详细解释： 1. **jQuery库的使用**：首先，可以看到代码中使用了jQuery库，它提供了一套方便的API来操作...
js实现漂亮的table表格
07-26
在网页开发中，表格（Table）是展示数据的...在"JS实现漂亮的表格table特效代码"这个压缩包文件中，你可以找到具体的实现代码，通过学习和理解这些代码，相信你会对使用JavaScript和CSS创建前端表格有更深入的了解。
使用字符串拼接的方式动态构造 HTML 表格
qq_57340552的博客
04-23 579
需要注意的是，使用字符串拼接的方式动态构造 HTML 表格时，需要注意转义特殊字符，以避免 XSS 攻击。可以使用一些工具库，如 Lodash 或 jQuery，来帮助我们更方便地构造 HTML 字符串，并自动转义特殊字符。在上面的代码中，我们首先使用字符串拼接的方式构造了一个包含表格头部的 HTML 字符串，并将它保存在。然后，我们构造了一个包含表格数据的数组，并使用。元素的 HTML 字符串，并将它保存在。方法遍历数组，构造了一个包含。
js动态拼接table
yuzheh521的博客
11-11 567
<table border="1" id="river"> <thead> <tr> <td>序号</td> <td>河道名称</td> <td>实时水位(m)</td> <td>警戒水位(m)</td> <td>较警戒水位变幅（m）</td> .
js实现表格动态合并
weixin_52776724的博客
03-09 1774
【代码】js实现表格动态合并。
Javascript 动态合并table单元格
fxxashelly的博客
07-10 2034
原博客地址：https://blog.csdn.net/kida_yuan/article/details/51371487直接保存html浏览器打开看效果，谢谢原博主提供，转载方便自己以后参考&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
JS拼接table
songjuntao8的专栏
09-08 634
最近做个功能，需要动态拼接table。之前的页面是Webform，保存的时候页面会回发卡顿。改为Ajax请求，页面改为table布局。 方式一： <table id="mytable"> <tr> <td> 123 </td> </tr> </table> <script> //选取你的table...
JavaScript实现动态生成表格
10-15
在网页中，JavaScript可以用来创建各种交互效果，包括动态生成表格。本篇文章将详细探讨如何使用JavaScript来实现动态生成表格的功能。 首先，我们需要理解动态生成表格的基本流程。在用户界面上，通常会有一个或多...
js动态创建、删除表格示例代码
12-11
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串 方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。 运行时间比较: 方法 运行时间
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
09-01
在这个例子中，开发者尝试直接将URL拼接成字符串并传递给`bootstrapTable('load')`方法，期望表格能自动从这个URL获取JSON数据。然而，这种方式可能不会工作，因为`bootstrapTable('load')`方法通常需要一个已经解析...
JS 动态增加table
09-19
动态的增加JSP页面的table,此代码可以动态增加此页面同类型的table
js拼接table
qq_36545870的博客
05-19 1614
在前端应用中，经常需要在js中动态拼接HTML页面，比如应用ajax进行局部刷新的时候，就需要在js中拼接HTML页面。 主要规则是将HTML页面的标签拼接为标签字符创，要特别注意的是标签中的变量或数值。 小编在此只贴出部分关键代码 在上述的table标签中拼接页面。拼接页面的内容如下： KaTeX parse error: Expected '}', got 'EOF' at end of i...
html5 js jquery 实现 table 表格宽度 自适应 实例
银河系天城知识宝库_技术专家蒋浩宇
07-22 2254
目录 介绍 样式 实例 介绍 1.写页面table 2.基础样式 3.js写入数据 4.js设置生成class 5.对个全部的class 做宽度设置 6.对个别的class 做宽度设置 用* 百分比的方式实现，一个多另一个就少点即可 多个情况进行计算即可 样式 实例 <html> <head> <title>New Doc...
jquery table 拼接集合
weixin_30520015的博客
11-21 794
1html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新增保养标准</title> </head> <body> <form class="form-horizonta...
js自动合并table相同的行（也适用于自动生成的table）
代码笔记
09-09 3494
js自动合并table相同的行（也适用于自动生成的table）
js 表格拼接
邓邓今天加油了吗
08-24 378
js 拼接表格
使用js根据数据动态拼接多级表格渲染
m0_46577631的博客
01-31 803
【代码】使用js根据数据动态拼接多级表格渲染。
js拼接html表格,开发中 js 拼table页面 以及触发事件
weixin_42213784的博客
06-19 408
define([ 'akui', 'dmAgent', 'propWindow' ], function(ak, dm) {var me;var statisticsQuery = function() {me = this;};var qbutn, date1, date2, qbtn, qGrid, gridMenu,copyOp,tjGrid,qtj;var czrwtxt, czdwtxt...
js循环数组拼接表格字符串，点击详情获取行数据
最新发布
05-29
好的，这是一个比较常见的前端问题。我可以为您提供一种实现方式，具体如下： 假设我们有一个数组 `data`，包含了表格每一行的数据，每行数据的格式如下： ```javascript const data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 25}, {id: 3, name: '王五', age: 30} ]; ``` 我们可以通过循环数组，拼接出表格的 HTML 字符串，并给每行数据添加一个点击事件，以便在点击时获取行数据。具体的实现代码如下： ```javascript // 获取表格容器元素 const tableContainer = document.getElementById('table-container'); // 定义表格 HTML 字符串 let tableHtml = '<table>'; tableHtml += '<thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead>'; tableHtml += '<tbody>'; for (let i = 0; i < data.length; i++) { const row = data[i]; tableHtml += '<tr>'; tableHtml += `<td>${row.id}</td>`; tableHtml += `<td>${row.name}</td>`; tableHtml += `<td>${row.age}</td>`; tableHtml += `<td><a href="javascript:void(0);" data-index="${i}">详情</a></td>`; tableHtml += '</tr>'; } tableHtml += '</tbody></table>'; // 将表格 HTML 字符串插入到容器元素中 tableContainer.innerHTML = tableHtml; // 给每个详情链接添加点击事件 const detailLinks = tableContainer.querySelectorAll('a[data-index]'); for (let i = 0; i < detailLinks.length; i++) { const link = detailLinks[i]; link.addEventListener('click', () => { const index = parseInt(link.getAttribute('data-index')); const row = data[index]; console.log(row); // 输出行数据 }); } ``` 上面的代码中，我们首先获取表格容器元素 `tableContainer`，然后定义了一个表格 HTML 字符串 `tableHtml`，其中包含了表格的头部和每一行的数据，以及一个详情链接。我们在循环数组时，使用模板字符串拼接出每一行的 HTML 字符串，并使用了 `data-index` 属性存储了行数据在数组中的索引。最后，我们将整个表格的 HTML 字符串插入到容器元素中，同时给每个详情链接添加了一个点击事件，在点击时获取行数据并输出到控制台中。 希望这个实现方式能够帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值