JavaScript实战——HTML做的表格/简单表格

最新推荐文章于 2023-07-28 10:02:57 发布
最新推荐文章于 2023-07-28 10:02:57 发布
阅读量1.6k 收藏 6
点赞数
分类专栏： html JavaScript 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54485193/article/details/124394604
版权

做的一个简单表格，表格有固定信息，没有插入功能

图例：

 

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function deleteRow(r){
				
				var i=r.parentNode.rowIndex;
				document.getElementById("myTable").deleteRow(i);
				
			}
			
		</script>
		
	</head>
	<style>
		
	</style>
	<body>
		<table id='myTable' border="1">
					<caption>个人信息</caption>
			<tr>
				<td style="background-color:yellow">学号</td>
				<td style="background-color:yellow">姓名</td>
				<td style="background-color:yellow">专业</td>
				<td style="background-color:yellow">操作</td>
			</tr>
			<tr>
				<td style="background-color:pink">1903605001</td>
				<td>张三</td>
				<td>计科</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" style="color:red"></td>
			</tr>
			<tr>
				<td style="background-color:pink">1903605011</td>
				<td>李四</td>
				<td>计科</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" style="color:red"></td>
			</tr>
			<tr>
				<td style="background-color:pink">1903605031</td>
				<td>王五</td>
				<td>计科</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" style="color:red"></td>
			</tr>
			<tr>
				<td style="background-color:pink">1903605041</td>
				<td>赵六</td>
				<td>计科</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" style="color:red"></td>
			</tr>
			<tr>
				<td style="background-color:pink">1903605051</td>
				<td>黄七</td>
				<td>计科</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" style="color:red"></td>
			</tr>
			<tr>
				<td style="background-color:pink">1903605061</td>
				<td>周八</td>
				<td>计科</td>
				<td><input type="button" value="删除" onclick="deleteRow(this)" style="color:red"></td>
			</tr>
			
		</table>
	</body>
</html>

温沐沐
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS对HTML表格进行增删改操作
11-22
要求如下：  写一个html页面，里面有一个表格，储存用户信息，包括：用户名，密码，姓名，邮箱，电话，qq，身份证号。  现在要通过js对表格进行动态的增删改查（只是内存操作即可）: 首先，加载页面时用js加载3条初始化记录；  有一个增加记录的按钮，点击后弹出一个div层提供输入，要求各字段必须符合输入格式且不能为空：  用户名：英文＋数字＋下划线；  密码：英文＋数字＋下划线＋6位以上；  姓名：中文；  邮箱，电话，qq，身份证号符合格式；  每条记录有修改、删除；  修改类似增加，要把原来值读出来； HTML页面代码： <html> <head> <meta http-equ
.html中创建表格的方式,javascript如何创建表格(javascript绘制表格的二种方法)
weixin_39613208的博客
06-15 305
1、inserRow()和insertCell()函数insertRow()函数可以带参数，形式如下：insertRow(index)：index从0开始这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：objTable.insertRo...
html表单中获取表单数据,利用JS轻松实现获取表单数据
weixin_34874119的博客
06-04 1800
接触过Angularjs的都知道,ng支持双向绑定，我们可以轻轻松松的通过ngModel将我们的值绑定到界面，当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了。那对于我们开发前台网站，不用ng一类的MVVM框架，只引用了Jquery，那么在处理表单的时候该怎么做呢。一. 原始做法--请选择----1----2----3--程序员A会说,So easy,通过Jquery id 去获...
HTML+JS读取表单数据
你的大数据学长
02-16 1万+
HTML+JS读取表单数据预计效果代码分析结果展示 预计效果 表单提交时，通常需要对表单实行数据有效性验证，验证数据的前提是读取表单元素的数据。如下图1所示的表单，在点击“提交”按钮时要读取登录名、密码、确认密码、性别、年龄等数据。然后用在网页上用警示框提示出用户所输入的每一项，如下图2。 代码 该代码可在我的GitHub中找到，链接在此 <!DOCTYPE html> <h...
使用 JavaScript 从 HTML 表中读取数据
allway2的博客
02-17 3247
如果您仍在使用 HTML <table> 在您的网页上显示数据，那么这篇文章及其示例将会很有用。我之前发表过一篇文章，解释了如何使用 JavaScript 将 JSON 数据动态转换为 HTML 表格。现在，我在这里分享一个简单的脚本，展示如何使用 JavaScript 从 HTML 表中读取数据。 首先，我将创建一个带有标题和几行的小表格。数据是硬编码的。 标记 <!DOCTYPE html> <html> <head>
html/javascript-表格的创建和使用
最新发布
记录和分享程序人生的点点滴滴
07-28 3087
html经常使用到表格table。在HTML中创建和使用表格，可以直接在html定义标签，也可以使用DOM（文档对象模型）来动态创建和操作表格元素。
html js创建表格,javascript创建表格方式详解
weixin_35859336的博客
06-26 1374
你知道javascript创建表格的方式都有哪些吗?下面要给大家讲到就是这方面的内容，具体介绍了两种创建表格的方式。方式1：.table1{border:1pxsolid#00ff21;width:200px;height:200px;margin:10pxauto;/*margin设置auto可以使居中显示*/border-collapse:collapse;/*将td之间的空隙...
通过使用jsoup解析html,绘画表格生成execl文件
weixin_30251829的博客
05-05 208
1.获取文件或者字符设置绘画表格字符编码 //得到Document并且设置编码格式 public static Document getDoc(String fileName) throws IOException{ File myFile=new File(fileName); Document doc= Jsoup.parse(myFil...
《HTML CSS JavaScript网页制作》第五章-使用HTML创建强大的表格
编程小鹏的博客
04-23 1733
《HTML CSS JavaScript网页制作》学习笔记
html+js实现动态添加表格及删除
PDyee的博客
10-25 1301
html+js实现动态添加表格及删除. 代码 <!--html中编写的部分--> <!--获取行和列的值 以及点击时的效果--> 行: <input type="text" id="getrow" /> 列: <input type="text" id="getcell" /> <button value="" onclick="change()">确定生成</button> </br>
HTML+JavaScript动态表格
07-26
用JavaScript实现的动态表格，双击可以实现不同类型的单元格内容的更改，有增删改的更能，可以上传图片，放大图片显示，日历，JavaScript验证等
JavaScript实战.pdf
05-04
出版时间： 2009-4-1 ISBN: 9787802057333 开本： 16开 定价: 72.00元 编辑本段内容简介 ...《JavaScript实战》带来你正好需要的知识，用有风格而且优雅的方式来发布这些组件 —— 即使你不是一个编程高手。
从入门到精通HTML5——PDF——网盘链接
02-27
　7.1.1　表格的基本构成——table、tr、td 119 　7.1.2　表格的标题——caption 120 　7.1.3　表格的表头——th 121 　7.2　设置表格基本属性 123 　7.2.1　表格的宽度——width 123 　7.2.2　表格的高度——height...
【卷一/共两卷】AJAX实战pdf高清版90M
07-07
6.1 做正确的事：开发高质量的应用 6.1.1 响应性 6.1.2 健壮性 6.1.3 一致性 6.1.4 简单性 6.1.5 付诸实践 6.2 让用户知情 6.2.1 处理自己请求的响应 6.2.2 处理其他用户提交的更新 6.3 为Ajax设计通知系统 6.3.1 对...
PHP开发实战1200例源码
09-22
实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r（$_ENV） 73 实例042 使用可变变量输出“I Like PHP！” 73 ...
纯JS+HTML简单表格增删改查
热门推荐
hikktn的博客
07-17 4万+
首先这两天写的一个简单增删改查，基本上靠百度和自学，完成的这个作业。 里面的功能十分的简陋，对于有需要的朋友一点点帮助吧。 这不是一条通往项目的链接：https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码：030a 里面有一些前期练习，如果心急，那就直接看index4.html吧，那是此次的网页实现，js文件放在js文件夹下。 然后，先给大家看......
Javascript更改/迁移/操纵HTML表格（Table）内容案例 （备选表格案例）
weixin_47826078的博客
12-10 722
大概记得这个内容搜起来有点点费劲，于是就放在博客上随时可以查看。 目录实现操纵HTML表格数据的JS函数：完整源码(demo 案例)效果功能说明 实现操纵HTML表格数据的JS函数： <script> function regFunction(){ var index = new Array(); var index_num = 0; var tab_row = 2; var colLen = 4; var course1 = new Array(.
JavaScript简单的表单编写
qq_57218752的博客
01-05 1281
话不多说直接进入主题 这是一个简单的表单 其中涉及到活动 区域时间 活动时间 性质等 这里其实最大的难度无非就是区域选择和时间的一个生成 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <div> 活动： &
使用javascript隐藏html动态表格的列
05-27
</html> ``` 这个示例代码中包含一个动态表格，以及两个按钮，分别用于隐藏“城市”列和“国家”列。当用户单击按钮时，JavaScript 函数 `hideColumn()` 会在表格中隐藏相应的列。您只需要指定要隐藏的列的索引即可...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值