HTML表格二：HTML表格的添加删除修改

最新推荐文章于 2023-12-21 12:43:31 发布
最新推荐文章于 2023-12-21 12:43:31 发布
阅读量1.3k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44340137/article/details/102641968
版权

1.表格的删除添加

<!DOCTYPE html>
<html>
<head>
	<title>表格</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	<body>
		<!--table表示的是表格 tr表示的是行 td表示的是列-->
        <!--通过对两行三列的修改进行创建变成五行五列 后又继续变成四行四列-->
        <!--表示的是表格头 相当于第一行加粗-->
		<table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="14" cellpadding="24" align="center" frame="box" >
		<!--可以设置表格的宽度 cellspacing设置的是表格和表格之间的距离 cellpadding设置的是表格边缘与内容之间的距离 frame显示的是边框 above显示的是上边框 void不显示边框 box显示全部边框-->
			<caption>一线城市工程师的平均工资</caption><!--caption的作用就是写出表格的标题-->
			<thead align="center align="center><!--对表格进行结构化的展示而不是一次展示完的作用  不管三个表格的顺序是怎样的都不会改变表格的出现属性-->
			<tr bgcolor="#d8e4bc">
				<th>城市</th>
				<th>2104</th>
				<th>2015</th>
				<th>2016</th>
			</tr>
		</thead>
		<tbody>
			<tr>
                <th bgcolor="#b8cce4" align="center" valign="center">北京</th>
				<th>2014</th>
				<th>9999</th>
				<th>7777</th>
			</tr>
			<tr>
				<td bgcolor="b8cce4" align="center" valign="center">上海</td>
				<td>2014</td>
				<td>9999</td>
				<td>7777</td>
			</tr>
		</tbody>
		<tfoot> 
			<tr align="center" valign="center">
				<!--在tr里还可以设置是垂直居中还是水平居中-->
				<td bgcolor="b8cce4" align="center" valign="center">合计</td>
				<td>2014</td>
				<td>9999</td>
				<td>7777</td>
			</tr>
		</tfoot>
		</table>
</html>

在这里插入图片描述2.表格的跨行跨列删除《前端工程师的工资》

<!--表格的跨行跨列删除使用的是 rowspan colspan-->
<!DOCTYPE html>
<html>
<head>
	<title>表格的跨列删除</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	<body>
		<!--创建的是两行三列的表格-->
		<!--表格的边框的宽度为6  frame rules就是外边框和内边框的意思 cellspacing cellpadding表示的就是单元格与单元格之间的距离 跨列属性colspan 跨行属性rowspan 在跨列或者跨行的过程中只需要在第一行记性修改，后面的一行相同或者说是需要跨列的内容就可以删除掉而不需要保留--> 
		<table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" >
			<caption>前端工程师的平均工资</caption>
			<thead bgcolor="green" align="center" valign="center">
				<tr>
					<th rowspan="2">城市</th>
					<th colspan="2">2014年</th>
					<th rowspan="2">2015年</th>
					<th rowspan="2"> 2016年</th>
				</tr>
				<tr>
					<th>上半年</th>
					<th>下半年</th>
				</tr>
			</thead>
			<tfoot align="center" valign="center">
				<tr>
					<td bgcolor="blue">合计</td>
					<td>7000</td>
					<td>8000</td>
					<td>9000</td>
					<td>11000</td>
				</tr>
			</tfoot>
			<tbody align="center" valign="center">
				<tr>
					<td bgcolor="blue">北京</td>
					<td>8000</td>
					<td>9000</td>
					<td>10000</td>
					<td>12000</td>
				</tr>
				<tr>
					<td bgcolor="blue">上海</td>
					<td>6000</td>
					<td>7000</td>
					<td>8000</td>
					<td>10000</td>
				</tr>
			</tbody>
</html>

在这里插入图片描述3.表格的跨行跨列删除练习题《课程表》

<!DOCTYPE html>
<html>
<head>
	<title>表格的跨行跨列删除练习题</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	<body>
		<!--border就是在原本的基础上给表格加上表框 cellspacing就是边框与边框之间的距离俗称就是将表格与表格之间的距离缩短甚至变为0-->
		<!--在table添加align="center"意思是将整体的表格进行居中 而在每一行也就是tr添加align="center"意思是将每一行的内容进行居中-->
		<table  border="1" width="600px" cellspacing="0"  cellpadding="5px" align="center">
			<caption>课程表</caption>
			<tr bgcolor="pink" >
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
			</tr>
			<tr align="center">
				<td rowspan="2">语文</td>
				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
			<tr align="center">
				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
			<tr align="center" valign="ceter">
				<td colspan="5">课间活动</td>
			</tr>
			<tr align="center">
				<td rowspan="2">
					<table border="1px" cellspacing="0">
						<tr>
							<td>前半节</td>
							<td>后半节</td>
						</tr>
						<tr>
							<td>诗词</td>
							<td>古文</td>
						</tr>
					</table>
				</td>
				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
			<tr align="center">
				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

weixin_44340137
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
主要介绍了JS实现动态表格的添加，修改，删除功能(推荐)的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
html动态删除添加表格
11-26
html动态删除添加表格
html表格增删改查
04-06
html 增删改该例子演示了利用微软.Net框架的Web服务与天气预报站点的硬件进行数据交换来实现Web天气预报的服务。
纯JS+HTML简单表格增删改查
热门推荐
hikktn的博客
07-17 4万+
首先这两天写的一个简单增删改查，基本上靠百度和自学，完成的这个作业。 里面的功能十分的简陋，对于有需要的朋友一点点帮助吧。 这不是一条通往项目的链接：https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码：030a 里面有一些前期练习，如果心急，那就直接看index4.html吧，那是此次的网页实现，js文件放在js文件夹下。 然后，先给大家看......
HTML实现可编辑表格
weixin_52909924的博客
04-11 3038
（1）页面中的数据表格通常承载了用户所需的数据，通常用户需要根据实际情况对部分数据进行修改。（2）当点击表格中可编辑数据时，在当前单元格中显示文本框并在其中显示原数据，从而为用户提供修改该数据的输入域。（a）在编辑模式下点击文本框之外的任何区域即可确认输入。（b）在编辑模式下输入数据不符合要求时，应该给出适当的提示，并强制改正后方可确认输入。
html表格增加删除和修改,表格的增删改demo
weixin_35798040的博客
06-03 1838
前端菜鸟，下午没什么活儿，写了个不过脑子的demo，十分喜欢妖尾，就用妖尾做了模拟数据，大伙儿轻喷。设计感为0，页面配色丑得我都不想看，在此膜拜我司UI工程师，很多实现功能的地方没有想到更好的办法，希望各位大佬斧正！效果图html结构姓名性别公会属性级别操作name1sex1party1proper1level1编辑删除添加删除姓名:性别:请选择女男公会:请选择妖精的尾巴剑齿之虎蛇姬之鳞魔女之罪属...
前端：表格内容的添加和删除
05-13
本教程将深入讲解如何在HTML表格中实现内容的添加和删除功能，这对于掌握DOM操作和理解JavaScript、CSS及HTML的基础应用至关重要。 首先，我们需要创建一个基本的HTML表格结构。HTML的`<table>`元素是表格的核心，...
jQuery实现点击该行即可删除HTML表格行
11-30
- DOM操作：选择元素、添加事件监听器、修改元素样式、删除元素 - CSS颜色值：`#FF3700`表示红色 - 动画效果：`.fadeOut()`方法 通过这样的实现，用户在HTML表格环境中可以直观地、交互式地删除数据，提高了用户...
JS对HTML表格进行增删改操作
11-22
在JavaScript代码中，我们为每个操作编写函数，如`showAddInput()`用于显示添加输入div，`updateRow()`和`delRow()`分别处理修改和删除操作。在这些函数中，我们将处理用户输入、验证数据、更新表格以及管理表格中的...
html之表格数据增加删除修改
Quincy.Coder的博客
10-11 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="./bootstrap-
html表格可以清空修改,如何在Element实现表格的增加、修改和删除
weixin_32296621的博客
06-03 673
工具HBuilderXnpm浏览器Node.js技术VueElementJavaScriptCSS3在使用Element框架时，可以使用el-table展示数据，还可以对表格记录进行新增、修改和删除。下面利用具体的实例说明：操作步骤如下：1、打开HBuilderX开发工具，创建vue+element框架项目，然后新建vue文件，输入名称Person.vue，点击创建按钮2、在新建的vue文件中，利...
怎么用修改修改表格里的元素html,HTML中的表格元素
weixin_36354965的博客
06-04 779
-- HTML中的表格元素[转帖]一，标签。标签是表格的标识符，用来界定表格的范围。标签是成对使用的标签，手标签和和尾标签之间的内容就是表格的内容。标签的属性主要有border,width,height,align,cellapcing,cellpasdding.它们都是可选的。1，border属性的参数值是数字，表示表格边框宽度所占的像素点数。它也可以不带有参数值使用，仅表示该表格是有边框的。...
html实现点击表格修改,jQuery实现可编辑的表格
weixin_39610468的博客
06-04 1003
前言更新了在页面中如何判断用户名是否已经被输入，这篇博客介绍一下页面中的表格内容如何像excle表格一样修改。内容显示效果照例，先上代码html代码：鼠标点击表格项就可以编辑学号姓名0000001张三0000002李四0000003王五0000004赵六css代码：table {border:1px solid black;border-collapse:collapse;width:400px;...
js+html实现对表格的增删改查(适合小白)
weixin_43207467的博客
12-15 1万+
js+html实现对表格的增删改查 首先这两天写的一个简单增删改查，基本上靠百度和自学，完成的这个作业。里面的功能比较简陋，有一个小bug，不过已经够用了，对于有需要的朋友一点点帮助吧。 废话不多说直接上项目提取码： 链接：https://pan.baidu.com/s/1ziLDYC2LPa3LTWM7W1GytQ 提取码：3pwu （为了论述简便，只呈现一个模块：角色管理，剩下两个一样） 一、...
html运行修改css数据,动态添加修改删除html表格内容_html/css_WEB-ITnose
weixin_36349685的博客
06-04 180
1.需求需要实现收银台上添加修改删除商品信息时顾显可以实时看到其变化2.解决收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据添加修改和删除操作3.代码mytest.html Dynamic Table名称颜色尺寸单价折扣数量金额dynamic_table.js onerror=handleErrvar txt=""function handleErr(msg,u...
js编辑html表格内容
weixin_44322124的博客
08-02 102
i++){j++){continue;}else{day=d[0];var hh='';var mm='';m = m+58;m = m-60;h = h+1;if(h<10){}else{if(m<10){}else{sss()
HTML页面模拟了一个类似Excel的表格在线diy修改表格内容
php-yyds
11-11 1908
这个HTML页面模拟了一个类似Excel的表格，可以添加和删除行和列，并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列，通过按钮可以删除最后一行和最后一列。每个单元格都可以通过直接点击并编辑来修改内容。使用ajax请求将这个数组传递给名为".php"的文件进行处理。注意，你需要自己创建一个".php"文件，并在其中编写相应的程序来保存数据。html实现在线表格编辑，可以修改每个表格内容，并且可以添加行和列。
html可编辑的表格
龚清林的博客
09-03 1万+
<!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-a
html table可编辑表格数据实现删除
最新发布
xingdiango的博客
12-21 1253
这样，当用户点击某一行的“Delete”按钮时，相应的行将被删除。在实际项目中，可能需要进一步确认用户是否要删除该行，以及处理删除后的数据更新。在上述示例中，每行的最后一列添加了一个按钮，并为按钮绑定了一个 onclick 事件，调用。函数接受按钮作为参数，在函数内部首先获取按钮的父节点，即所在的。这里教大家使用纯html和js脚本结合实现删除表格数据。元素，最后获取行元素的父节点，即所在的表格。方法，将行的索引作为参数，从表格中删除该行。JavaScript 部分的。的父节点，即所在的行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值