js+Ajax学习——动态向页面表格添加数据

最新推荐文章于 2024-09-12 08:31:40 发布

我还没秃我还能学！

最新推荐文章于 2024-09-12 08:31:40 发布

阅读量333

点赞数

分类专栏：前端 ajax 笔记文章标签： js ajax

本文链接：https://blog.youkuaiyun.com/weixin_43068329/article/details/100666338

版权

这篇博客探讨了如何利用JavaScript和Ajax技术实现在网页中动态地向表格添加数据，详细介绍了相关步骤和示例代码，对于前端开发者提升动态交互体验具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态添加表格</title>
		<script>
            //封装document.getElemenyById();
        function $(id) {
	        return document.getElementById(id);
        }
        </script>
	</head>

	<body>
		<script>
			//动态添加数据显示在tbody中，拼字符串放到tbody的innerHTML
			function add() {
				//1拼字符串
				var html = "<tr>";
					html += "<td>01</td>";
					html += "<td>书1</td>";
					html += "<td>作者1</td>";
					html += "<td>";
						html += "<button>修改</button>";
						html += "<button>删除</button>";
					html += "</td>";
				html += "</tr>";
				
				html += "<tr>";
					html +&