JS中创建信息表单，将信息内容插入到表格中

最新推荐文章于 2022-11-12 00:39:21 发布
最新推荐文章于 2022-11-12 00:39:21 发布
阅读量6.1k 收藏 57
点赞数 6
分类专栏： 初识java 文章标签： js java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34614766/article/details/103213230
版权

实现功能：
1.上部添加的信息，点击提交后插入到下方表格
2.单行、多行、全部删除
3.重置、全选

**CSS:**
/* 全局字体 */
	* {
		font-size: 16px;
		
	}

	/* 全局列高度 */
	td {
		height: 30px;
	}

	/* 全局居中 */
	table{
		margin: 0px auto;
	}
	/* 删除全部按钮 */
	#d3{
		text-align: center;
	}
	#d4{
		margin-right: 20px;
	}
	/* 上部表单 ------------------------------*/
	span {
		color: red;
		margin-right: 5px;
	}

	/* 表头字体 */
	#d1 #d11 th {
		font-size: 25px;
	}

	/* 第一列宽度及距左边框距离 */
	#d1 #d11 .t1 {
		width: 100px;
		padding-left: 10px;
	}

	/* 第二列宽度 */
	#d1 #d11 .t2 {
		width: 200px;
	}

	/* 表头居中 */
	#d1 #d11 th {
		text-align: center;
	}

	/* 性别输入框大小及内容字体 */
	#d1 .c2 input {
		width: 190px;
		height: 15px;
		font-size: 12px;
	}

	/* 出生日期选择框宽度、高度 */
	#d1 .c4 .t2 input {
		width: 35px;
		height: 15px;
		font-size: 12px;
	}

	/* 所在城市下拉框宽度 */
	#d1 .c5 .t2 #city {
		width: 80px;
	}

	/* 重置按钮位置 */
	#d1 .c6 .t1 {
		text-align: center;

	}

	/* 重置尺寸 */
	#d1 .c6 input {
		font-size: 12px;
		width: 40px;
		height: 25px;
	}

	/* 提交按钮位置 */
	#d1 .c6 .t2 {
		text-align: center;
	}

	/* 添加边框线并去除表格默认样式 */
	table,
	td,
	th {
		border: 1px #DCDCDC solid;
		border-collapse: collapse;
	}

	/* 下部表单------------------------------ */
	/* 表头字体 */
	#d2 caption {
		font-size: 25px;
		font-weight: 550;
		margin-bottom: 10px;
	}

	/* 勾选框宽度、居中 */
	#d2 .c1 {
		width: 80px;
		text-align: center;
	}

	/* 姓名、性别 */
	#d2 .c2,
	#d2 .c3 {
		width: 60px;
		text-align: center;
	}

	/* 生日、城市 */
	#d2 .c4,
	#d2 .c5 {
		width: 100px;
		text-align: center;
	}

	/* 操作 */
	#d2 .c6 {
		width: 150px;
		text-align: center;
	}

	/* 编辑、删除按钮 */
	#d2 .c6 input {
		background-color: rgba(0, 0, 0, 0);
		border: none;
		color: #8E67B2;
	}

**HTML：**
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript">
			//动态向信息表中提交用户信息
			function subInfo(){
				// 获得对象的属性值
				var name1 = document.getElementById("name").value;
				//性别选择
				var select =document.getElementsByName("sex")[0];
				if (select.checked==true) {
					var i = 0;
				} else {
					i = 1;
				}
				var sex1 = document.getElementsByName("sex")[i].value;
				var year1 = document.getElementById("year").value;
				var month1 = document.getElementById("month").value;
				// 将提交的出生日期拼接成一个字符串
				var birth = year1+"年"+month1+"月";
				var city1 = document.getElementById("city").value;
				//创建"行"节点对象
				var tr = document.createElement("tr");
				//设置行的内容
				tr.innerHTML="<tr>"
					+"<td class='c1'><input type='checkbox' name='check'/></td>"
					+"<td class='c2'>"+name1+"</td>"
					+"<td class='c3'>"+sex1+"</td>"
					+"<td class='c4'>"+birth+"</td>"
					+"<td class='c5'>"+city1+"</td>"
					+"<td class='c6'><input type='button' value='编辑' class='cla2'/>|<input type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>"
					+"</tr>";
				// 添加数据到表中
				document.getElementById("d2").appendChild(tr);
			}
			// 全选or全不选
			function selectAll(){
				//获得全选框对象
				var a = document.getElementById("d211");
				//获得其他复选框
				var arr = document.getElementsByName("check");
				if (a.checked==true) {//全选则其他框全部选中
					for (var i = 0; i < arr.length; i++) {
						arr[i].checked = true;
					}
				} else{//未全选则其他框都不选
					for (var i = 0; i < arr.length; i++) {
						arr[i].checked = false;
					}
				}
			}
			//单行删除
			function delLine(obj){
				var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象
				document.getElementById("d2").removeChild(tr);
			}
			//删除选中
			function delSelect(){
				// 获得复选框对象数组
				var arr = document.getElementsByName("check");
				// alert(arr);
				var flag = false;
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].checked==true) {
						flag = true;
						//获得行的父节点，父节点调用删除方法删除子节点
						var tr = arr[i].parentNode.parentNode;
						document.getElementById("d2").removeChild(tr);
						i--;//下标是动态变化的，后面的元素自动前移，所以要自减。
					} 
				}
			}
			//删除其所有行
			function delAll(){
				// 获得复选框对象数组
				var arr = document.getElementsByName("check");
				for (var i = 0; i < arr.length; i++) {
					var tr = arr[i].parentNode.parentNode;
					document.getElementById("d2").removeChild(tr);
					i--;
				}
			}
		</script>
	</head>
	<body>
		<form action="" method="" id="d1">
			<table id="d11">
				<tr class="c1">
					<th colspan="2">用户信息</th>
					<!-- <th></th> -->
				</tr>
				<tr class="c2">
					<td class="t1"><span>*</span>姓名</td>
					<td class="t2"><input type="text" name="" id="name" value="" /></td>
				</tr>
				<tr class="c3">
					<td class="t1"><span>*</span>性别</td>
					<td class="t2">
						<input type="radio" name="sex" id="" value="男" checked="checked"/>男
						<input type="radio" name="sex" id="" value="女" />女
					</td>
				</tr>
				<tr class="c4">
					<td class="t1"><span>*</span>出生日期</td>
					<td class="t2">
						<input type="text" name="" id="year" value="" />年
						<input type="text" name="" id="month" />月
					</td>
				</tr>
				<tr class="c5">
					<td class="t1"><span>*</span>所在城市</td>
					<td class="t2">
						<select id="city">
							<option value="广州">广州</option>
							<option value="深圳">深圳</option>
							<option value="西安">西安</option>
						</select>
					</td>
				</tr>
				<tr class="c6">
					<td class="t1">
						<input type="reset" name="" id="reset" value="重置" />
					</td>
					<td class="t2">
						<input type="button" name="" id="sub" value="提交" οnclick="subInfo()"/>
					</td>
				</tr>
			</table>
		</form>

		<br />
		<!-- 第二个表~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
		<table border="" cellspacing="" cellpadding="" id="d2">
			<caption>用户信息表格</caption>
			<tr id="d21">
				<th class="c1"><input type="checkbox" name="" id="d211" value="" οnchange="selectAll()"/>全选</th>
				<th class="c2">姓名</th>
				<th class="c3">性别</th>
				<th class="c4">出生日期</th>
				<th class="c5">所在城市</th>
				<th class="c6">操作</th>
			</tr>
		</table>
		<div id="d3">
			<input type="button" name="" id="d4" value="删除选中" οnclick="delSelect()"/>
			<input type="button" name="" id="d5" value="清空表格" οnclick="delAll()"/>
		</div>
	</body>
</html>

运行效果：
在这里插入图片描述

米斯特尔.w
关注
  • 6
    点赞
  • 踩
  • 57
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js实现学生信息输入表格
weixin_56726579的博客
03-14 1267
样式 <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; } </style> js <body> <h3>学生信息表</h3&
原生js+html+css实现从表单（form）动态加数据到表格（table）
qwe123_asd的博客
09-20 2985
css部分 <style> .info{ width: 150px; margin-bottom: 10px; } th{ width: 100px; padding-left: 5px; } .title{ height: 30px; background: purple; color: white...
用js简单实现信息录入功能
qq_64180670的博客
11-12 1754
用js简单实现信息录入功能
javascript表单提交的内容显示在表格中
冲出仁川，走出马德里，故事还会再继续
03-11 3537
实现三个文本域的内容提交之后显示在表格中，代码直接用文本文件运行，记得后缀改为.html 运行结果 输入123，并点击提交按钮之后，数据就会显示在下面的表格中，有什么问题可以私聊我。 下面是代码 <script language="javascript"> function chk() { setTimeout("chk()",100); text1.innerHTML =...
JS：表单输出自动显示在表格里
stevenbill的博客
12-19 1002
这个很简单，先说一下实现的原理：利用 JavaScript实现表单的实时互动。 再简单介绍实现的过程：先给标签的属性onload属性设置一个值，连接到相应的JavaScript函数，JavaScript函数将文本框中的内容通过innerHTML实时传递到对应ID的表格中的标签对中，便实现了你所要的效果。 下面就给你写下具体的代码： (复制粘贴到一个TXT文档中，将后缀名改为htm就可以) ...
js可编辑的网页表格，并可将填写单元格内容保存到MySQL数据库，再读取到另一表格中
10-06
读取数据后，PHP可能将结果转换为JSON格式，然后返回给JavaScript，再由JavaScript填充到新的表格中。这一步通常使用`json_encode`函数来实现，并通过Ajax响应处理。 在数据库设计方面，我们需要一个至少包含两列的...
html静态网页（导航条、表格、表单、音视频插入、照片框等）
03-29
HTML静态网页设计是Web开发的基础，它涉及到一系列的网页元素和功能，如导航条、表格、表单、音视频插入以及照片框等。这些元素在创建一个完整的、交互性强的网站时都起着至关重要的作用。 首先，让我们来讨论HTML5...
JS实现动态生成表格并提交表格数据向后端
11-24
在这个函数中，我们将创建新的表格行（tr）并插入到表格中。每个新行都包含一组输入字段（`<input>`），用于用户输入数据。同时，每个输入字段都有唯一的ID，通过全局变量`num`来确保。此外，每个行还包含删除、编辑...
JSP中使用JavaScript动态插入删除输入框实现代码
12-01
在本文中，我们将深入探讨如何在JSP中利用JavaScript实现动态插入和删除输入框的功能。这一技术对于构建交互式Web应用程序至关重要，特别是那些需要用户输入多个可变数据的场景。 首先，我们来看JavaScript代码的...
前端：表格内容的添加和删除
05-13
本教程将深入讲解如何在HTML表格中实现内容的添加和删除功能，这对于掌握DOM操作和理解JavaScript、CSS及HTML的基础应用至关重要。 首先，我们需要创建一个基本的HTML表格结构。HTML的`<table>`元素是表格的核心，...
JS高级编程实现信息录入系统
m0_52796215的博客
09-13 413
JS高级编程实现信息录入系统
js 实现人员基本信息渲染到表格
xuebinsunwumei的博客
12-09 388
html代码： <input type="text" id="uname" ><span id="name"></span> <br/> <input type="text" id="utel" ><span id="tel"></span> <br/> <input type="radio" value="男" id="man" name="sex">男 <input type="radio"
JavaScript 动态生成表格 案例
刘伟佳的博客
04-18 3016
功能描述 在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： 分析 HTML界面设计 <body> 行：<input type="text" id="row" /> 列： <input type="text" id="col" /> <input type="button" name="go" id="go" value=...
JavaScript将数组内容添加到HTMLtable表格中
weixin_46388225的博客
03-19 6515
Document 序号 姓名 年龄 地址 性别 ...
Js实现简单的表格内容添加
DeviL_MCry的博客
05-26 1314
我们来用原装js来实现一个简单的表格内容添加 html代码 <body> <table border="1" width="200" height="30" id="table"> <tbody id="tb"> <tr> <td>青椒肉丝</td> ...
JS - Array - 在数组的指定下标添加或替换元素 。 也可删除指定下标的元素
江咏之
08-23 8489
一，首先介绍下 js Array对象 中的 splice 方法 。 （ splice在英文中是剪接的意思 ） 1，定义和用法 splice() 方法用于插入、删除或替换数组的元素。 **注意：**这种方法会改变原始数组！。 2，语法 array.splice(index,howmany,item1,…,itemX) index : 必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany : 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
js实现，给定一个数组，将数组内容写入并生成表格，表格的宽高可由输入的参数控制。
m0_53881313的博客
04-18 2481
结果：这里的宽高可以设置。 成绩数组： 数组如下。 var data = [ { StudentNumber: '学号', Chinese: '语文成绩', Math: '数学成绩' , English:' 英语成绩', TotalScore:' 总成绩', Comment: '成绩等级'}, { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, To...
vue中表单中的数据添加到表格中
m0_58451019的博客
10-11 3831
通过vue中的表单数据添加到表格中
JavaScript_实现增删改操作（新增、删除、修改）
热门推荐
一只正在狂飙的肥兔
12-09 1万+
通过动态生成页面，以及事件委托、点击事件、循环遍历、数组等 js 基础知识实现新增、删除和修改的操作！
jQuery从表单中获取信息插入表格
最新发布
06-09
可以使用jQuery的表单选择器和插入方法来实现。以下是一个简单的示例： ... ... 姓名： ...这段代码会在点击提交按钮后，获取表单中的姓名和年龄，然后将其插入到表格中。同时会重置表单，以便下次输入。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值