jQuery实现表格可编辑

最新推荐文章于 2021-08-21 08:36:52 发布

qq_35937045

最新推荐文章于 2021-08-21 08:36:52 发布

阅读量788

点赞数 2

分类专栏： Web前端文章标签： JQuery

本文链接：https://blog.csdn.net/qq_35937045/article/details/100084250

版权

该博客介绍如何利用jQuery让HTML表格的单元格变得可编辑。通过在表格单元格内嵌入文本框，实现了数据的编辑，并将文本框中的输入值同步到单元格文本。

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

分析:html中的table表格是不能直接在表格中更改数据的，实现表格数据可编辑做法是在单元格中插入一个文本框，在文本框中实现数据的编辑功能，再将文本框中输入的值设置为单元格的文本值。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
    
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#tab {
    
				position: relative;
				top: 20px;
				left: 20px;
				width: 450px;
				border: 1px solid rgba(0, 0, 0, .2);
				border-collapse: collapse;
			}

			th,
			td {
    
				width: 150px;
				height: 30px;
				border: 1px solid rgba(0, 0, 0, .2);
			}

			th {
    
				color: #eee;
				background-color: #555555;
			}

最低0.47元/天解锁文章

qq_35937045

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表格可编辑

分析:html中的table表格是不能直接在表格中更改数据的，实现表格数据可编辑做法是在单元格中插入一个文本框，在文本框中实现数据的编辑功能，再将文本框中输入的值设置为单元格的文本值。代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></ti...
复制链接

扫一扫

专栏目录