html可编辑的表格

最新推荐文章于 2023-12-21 12:27:31 发布

每天都进步一点点

最新推荐文章于 2023-12-21 12:27:31 发布

阅读量1w

点赞数 5

分类专栏： js JQ html 文章标签： html html5 css

本文链接：https://blog.csdn.net/gongqinglin/article/details/120073682

版权

HTML CSS JavaScript 可编辑表格动态添加

关键词由CSDN通过智能技术生成

js 同时被 3 个专栏收录

52 篇文章

订阅专栏

39 篇文章

订阅专栏

html

9 篇文章

订阅专栏

这个博客展示了一个可编辑的HTML表格实现，包括样式设计和JavaScript函数以添加新行。表格具有三列，所有单元格内容均可编辑。用户可以通过点击按钮轻松添加新行，每个新行的各列都包含可编辑的div元素。

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

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>可编辑表格</title>
<style>
table.wTable {
	margin-top:15px;
	border-collapse:collapse;
	border:1px solid #aaa;
	width:100%;
}
table.wTable th {
	vertical-align:baseline;
	padding:5px 15px 5px 6px;
	background-color:#3F3F3F;
	border:1px solid #3F3F3F;
	text-align:left;
	color:#fff;
}
table.wTable td {
	vertical-align:text-top;
	padding:6px 15px 6px 6px;
	border:1px solid #aaa;
}
table.wTable tr:nth-child(odd) {
	background-color:#F5F5F5;
}
table.wTable tr:nth-child(even) {
	background-color:#fff;
}
</style>
<script>
function addRow(){
    var wTable = document.getElementById("wTable");
    var tBodies = wTable.tBodies;
    var tbody = tBodies[0];
    var tr = tbody.insertRow(tbody.rows.length);
    var td_1 = tr.insertCell(0);
    td_1.innerHTML = "<div contenteditable='true'>第1列</div>";
    var td_2 = tr.insertCell(1);
    td_2.innerHTML = "<div contenteditable='true'>第2列</div>";
	var td_3 = tr.insertCell(2);
    td_3.innerHTML = "<div contenteditable='true'>第3列</div>";
    }

</script>
</head>
<body>
<fieldset>
<legend>可编辑的表格</legend>
<table class="wTable" id="wTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0" cellpadding="2" width="100%">
<thead>
<tr>
<th>第一列标题</th>
<th>第二列标题</th>
<th>第三列标题</th>
</tr>
</thead>
<tbody>
<tr>
<td><div contenteditable="true">第一行第一列</div></td>
<td><div contenteditable="true">第一行第二列</div></td>
<td><div contenteditable="true">第一行第三列</div></td>
</tr>
</tbody>
</table>
</fieldset>
<input type="button" onClick="addRow();" style="font-size:16px;" value="+"/>
</body>
</html>