js表格动态添加数据（两种方法）

最新推荐文章于 2024-08-31 16:32:57 发布

steamedbread321

最新推荐文章于 2024-08-31 16:32:57 发布

阅读量7.9k

点赞数 8

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44766633/article/details/106714275

版权

JavaScript 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

js里面表格的动态添加我用两种方法演示
第一个es6里面的模板法
第二种是用循环遍历去创建元素然后再appendchild放入document里面去

先来看看效果图
在这里插入图片描述
先来展示第一种方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            height: 220px;
            border: 1px solid black;
            border-collapse: collapse;
        }
		th,
        tr,
        td {
            border: 1px solid #333;
        }
        table tr {
            text-align: center;
        }

        table img {
            width: 70px;
            height: 70px;
        }
    </style>
</head>

<body>
    <table id="tab">
        <thead>
            <tr>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="mybody">
        </tbody>
    </table>
    <script>
        list = [
            {
                pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2043516870,4283186106&fm=26&gp=0.jpg',
                shopName: '抽纸',
            },
            {
                pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2043516870,4283186106&fm=26&gp=0.jpg',
                shopName: 'abc',
            }
        ]
        var out = '';
        for (let i = 0; i < list.length; i++) {
            // out += '<tr>';
            // out += '<td><img src =' + list[i].pic + '></td><td>' + list[i].shopName + '</td><td><button οnclick="dele()">' + '删除' + '</button></td>';
            // out += '</tr>';
            out += `
                <tr>
                    <td><img src =${list[i].pic}></td>
                    <td>${list[i].shopName}</td>
                    <td><button class='delete'>删除</button></td>
                </tr>
            `
        }
        let tab = document.getElementById('mybody');
        tab.innerHTML = out;
        // let deleteAll = document.getElementsByClassName("delete");
        // 		for(let i = 0; i < deleteAll.length; i++) {
        // 			// 依次给每一个删除按钮添加点击时间
        // 			deleteAll[i].onclick = function() {
        // 				console.log(deleteAll[i] == this)
        // 				// 在监听函数内部，this表示节点本身
        // 				// this.parentElement表示拿到父元素节点对象   td
        // 				// this.parentElement.parentElement拿到祖父元素节点对象   tr  
        // 				deleteAll[i].parentElement.parentElement.remove();
        // 			}
        // 		}
        let de = document.getElementsByTagName('button');
        for (let i = 0; i < de.length; i++) {
            de[i].onclick = function () {
                this.parentElement.parentElement.remove();
            }
        }
    </script>
</body>
</html>

这种方法使用的是字符串拼接的方法，代码块中有es6 es5的拼接，先拼接起来然后把拼接好的字符串使用innerHTML放入，因为innerHTML可以还原标签，所以img图片都可以展示出来。
最主要的是删除，在这里呢，删除使用的是从button的元素由父级找到td然后再找到tr。最后将这一行删除即可。删除的代码块中有一个for循环是因为需要找到每一个button的位置。
切记先放入元素，然后再写删除代码。不然无效哦！

第二种方法


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				width: 800px;
				border: 1px solid #333;
				border-collapse: collapse;
				text-align: center;
			}
			
			th,
			tr,
			td {
				border: 1px solid #333;
			}
				
			
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>商品图片</th>
					<th>商品名称</th>
					<th>类型</th>
					<th>价格</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
			</thead>

			<tbody>

			</tbody>

		</table>

		<script type="text/javascript">
			window.onload = function() {
				let goodsList = [
					{
						pic: "//img10.360buyimg.com/cms/s80x80_jfs/t1/144140/6/48/199405/5edb00dbEbc6a1014/9d7ef42efb9ee2c1.jpg",
						name: "空调",
						type: "2p",
						price: 5499,
						num: 1,
						total: 5499
					},
					{
						pic: "//img10.360buyimg.com/cms/s80x80_jfs/t1/20647/38/9511/274474/5c7f89f6Eb9310d0c/e51ba76649ce06c5.jpg",
						name: "爱他美奶粉",
						type: "2段",
						price: 355,
						num: 1,
						total: 355
					},
					{
						pic: "//img10.360buyimg.com/cms/s80x80_jfs/t1/122064/24/4617/421819/5ee085fbE498651e5/e809a83d00289751.jpg",
						name: "尤妮佳尿不湿",
						type: "XL",
						price: 180,
						num: 1,
						total: 180
					},
				]

				// 创建元素节点，根据关系形成页面
				for (let i = 0; i < goodsList.length; i++) {
					//根据商品列表的数量创建多个tr元素
					let tr = document.createElement("tr");

					for (let key in goodsList[i]) {
						let td = document.createElement("td");
						if (key == "pic") {
							let img = document.createElement("img");
							img.src = goodsList[i][key];
							td.appendChild(img);
						} else if (key == "name") {
							let a = document.createElement("a");
							a.href = "#";
							a.innerHTML = goodsList[i][key];
							td.appendChild(a)
						} else if (key == "num") {
							let subBtn = document.createElement("button");
							subBtn.innerHTML = "-";
							td.appendChild(subBtn);

							let span = document.createElement("span");
							span.innerHTML = goodsList[i][key];
							td.appendChild(span);

							let addBtn = document.createElement("button");
							addBtn.innerHTML = "+";
							td.appendChild(addBtn);
						} else {
							td.innerHTML = goodsList[i][key];
						}
						tr.appendChild(td);
					}
					
					let td = document.createElement("td");
					let delBtn = document.createElement("button");
					delBtn.innerHTML = "删除";
					delBtn.classList.add("delete"); //给按钮添加一个类名
					td.appendChild(delBtn);
					tr.appendChild(td);


					// 将每一个tr元素添加到tbody中
					let tbody = document.getElementsByTagName("tbody")[0];
					tbody.appendChild(tr);
				}

				let deleteAll = document.getElementsByClassName("delete");
				for(let i = 0; i < deleteAll.length; i++) {
					// 依次给每一个删除按钮添加点击时间
					deleteAll[i].onclick = function() {
						console.log(deleteAll[i] == this)
						// 在监听函数内部，this表示节点本身
						// this.parentElement表示拿到父元素节点对象   td
						// this.parentElement.parentElement拿到祖父元素节点对象   tr  
						this.parentElement.parentElement.remove();
					}
				}
			}
		</script>
	</body>
</html>