js样式创建可编辑表格

最新推荐文章于 2024-08-16 11:42:33 发布

宇小白

最新推荐文章于 2024-08-16 11:42:33 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_64975782/article/details/128284781

版权

这篇博客介绍了一个使用JavaScript实现的可编辑表格。表格包含序号、用户名、年龄和操作四列，具备添加列、编辑和删除行的功能。通过按钮点击触发相应操作，例如确定按钮将使前三格文本变为只读，编辑按钮则允许编辑，删除按钮则在二次确认后移除行。整个实现过程涉及到DOM操作和JavaScript的事件监听。

摘要由CSDN通过智能技术生成

需求:

1该表格由序号，用户名，年龄，操作四行组成

2该表格可以通过按钮创建列

3操作格带有三个按钮实现

确定：该行前三格文本无法编辑

编辑：该行前三格文本可以编辑

删除：删除该行

首先制作表格表头

        <div id="content">
		<table width="700px" id="table">
			
			<tr>
			<td>序号</td>
			<td>用户名</td>
			<td>年龄</td>
			<td>操作</td>
			</tr>
			</div>

需要按按钮来添加表行所以在div里添加按钮

<input type="button" value="新建" onclick="addTr()">

接下来是实现创建表行通过按钮中的onclick事件创建表行，该事件调用了script中的addTr函数，

调用后就会为表添加一行了

function addTr(){
				//插入新行，返回行对象
				let table=document.getElementById("table")
				//生成行对象
				let tr= table.insertRow()
				//插入td
				let td=

最低0.47元/天解锁文章