dom写HTML并且实现功能案例

最新推荐文章于 2021-06-16 00:32:01 发布
最新推荐文章于 2021-06-16 00:32:01 发布
阅读量427 收藏
点赞数
分类专栏： 简单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44440403/article/details/86583125
版权

基础版

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;}
		th,td{line-height: 35px;text-align: center;border: 1px solid gray;}
	</style>
</head>
<body>
	<label for="">姓名：</label><input type="text" id="txt1">
	<label for="">年龄：</label><input type="text" id="txt2">
	<label for="">住址：</label><input type="text" id="txt3">
	<button id="btn">添加</button>

	<!-- <table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>住址</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>AAA</td>
			<td>AAA</td>
			<td>AAA</td>
			<td><a href="#">删除</a></td>
		</tr>
		<tr>
			<td>AAA</td>
			<td>AAA</td>
			<td>AAA</td>
			<td><a href="#">删除</a></td>
		</tr>
		<tr>
			<td>AAA</td>
			<td>AAA</td>
			<td>AAA</td>
			<td><a href="#">删除</a></td>
		</tr>
		<tr>
			<td>AAA</td>
			<td>AAA</td>
			<td>AAA</td>
			<td><a href="#">删除</a></td>
		</tr>
	</table> -->
	<script type="text/javascript">
		//获取id
		var t1=document.getElementById('txt1');
		var t2=document.getElementById('txt2');
		var t3=document.getElementById('txt3');
		var btn=document.getElementById('btn');
		//创建table
		var tab=document.createElement('table');
		//创建tr
		var tr=document.createElement('tr');
		//创建th
		var th1=document.createElement('th');
		var th2=document.createElement('th');
		var th3=document.createElement('th');
		var th4=document.createElement('th');
		//添加th内容
		th1.innerHTML='姓名';
		th2.innerHTML='年龄';
		th3.innerHTML='住址';
		th4.innerHTML='操作';
		//把th放入tr中
		tr.appendChild(th1);
		tr.appendChild(th2);
		tr.appendChild(th3);
		tr.appendChild(th4);
		//把tr放入table中
		tab.appendChild(tr);
		btn.onclick=function(){
			if(t1.value==''||t1.value==''||t3.value==''){
				alert('输入框不能为空');
				return;
			}
			var tr0=getTr(t1.value,t2.value,t3.value);
			tab.appendChild(tr0);
			//把表格放入body中
			document.body.appendChild(tab);
			//输入后清空输入框
			t1.value='';
			t2.value='';
			t3.value='';
		};

		function getTr(name,age,add,link){
			//创建tr
			var tr=document.createElement('tr');
			//创建td
			var td1=document.createElement('td');
			var td2=document.createElement('td');
			var td3=document.createElement('td');
			var td4=document.createElement('td');
			var a=document.createElement('a');

			//添加th内容
			td1.innerHTML=name;
			td2.innerHTML=age;
			td3.innerHTML=add;
			a.innerHTML='删除';
			a.href="#";
			//添加删除事件
			a.onclick=function(){
				if(confirm('是否确认删除？')){
					tab.removeChild(this.parentNode.parentNode);
				}
			};
			//把td放入tr中
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			td4.appendChild(a);
			//把tr放入table中
			return tr;
		}
	</script>
</body>
</html>
你个小屁孩丫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS DOM练习例子02
一虹的博客
09-27 267
JS DOM练习例子021.1 实现一亮其他暗效果1.2 tab栏切换1.3 事件流使用1.4 图片随鼠标移动 1.1 实现一亮其他暗效果 利用排他思想实现 效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>1</butto
关于html各个功能的简单事例
OneManArmy的博客
07-31 670
第一个Html文档 康纳的父亲是圣殿骑士大师海尔森·肯威[1]  ，母亲则是印第安人卡涅齐欧（Kaniehtí:io）。祖父爱德华·詹姆斯·肯威是一名英国的私掠船员，后来成为海盗,他还是一名刺客。祖母是英国伦敦当地地主的女儿特莎，另外康纳有一位姑母叫珍妮弗·斯科特。康纳从小在莫霍克部族长大，由于和白人殖民者经常碰撞，儿时经历颇为凄惨。 他的村庄在1760年遭到大火（由华盛顿所下达的命令
学习DOM以及弹幕的实现案例
only_zing的博客
07-31 1047
DOM的定义 DOM（Document Object Model）是文档对象模型，是一组用来描述JS代码怎样与HTML文档进行交互和访问的web标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式、以及行为。 现在操作DOM可能已经落后了，但DOM里面还是很多是值得我们去学习的。对于DOM的学习，如果是仔细钻研的话，可能需要大量的时间；如果想快速的了解DOM，可以从四个方面入手： 1）操作节点 操作元素节点 操作属性节点 操作文本节点 2）操作CSS 操作css类 操作css行
DOM操作HTML
wenxin_liu的博客
01-04 160
有的时候工作需要，为了方便给HTML添加元素，我们可以使用js的DOM来实现操控。 #一.创建 创建元素，这里我示例创建一个select标签 var p = document.createElement(‘p’); 然后我还可以给它添加或修改内容。 p.innerHTML = ‘今天风好大呀！’; 还可以创建文本 var text = document.createTextNode(“天气也变温了...
dom.html作用,dom写HTML并且实现功能案例
weixin_39664560的博客
06-16 170
Documenttable{width: 500px;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;}th,td{line-height: 35px;text-align: center;border: 1px solid gray;}姓名：年龄：住址：添加//获取idvar t1=document.getEle...
js中的DOM模拟购物车功能.docx
01-21
4. DOM 模拟购物车功能可以使用 JavaScript 实现。 5. 使用 button 元素可以实现增加或减少数量的功能。 6. 使用 span 元素可以用于显示数量的值。 7. 使用 JavaScript 可以实现计算小计和总计的值。 8. 使用遍历...
HTML5实现鲸鱼游动特效.zip
07-11
HTML5是一种先进的网页开发技术，它为网页设计者和开发者提供了更多的功能和可能性，使得创建交互性和...通过学习这个案例，开发者可以深入了解如何在网页上实现动态效果，提高用户体验，并且掌握更多前端开发的技巧。
html5+jquery实现裁剪头像上传功能.rar
最新发布
01-27
在本项目"html5+jquery实现裁剪头像上传功能"中，开发者巧妙地结合了HTML5的新特性与jQuery库来创建这一功能，提供了用户友好的交互体验。以下是关于这个主题的一些关键知识点： 1. **HTML5 Canvas**: HTML5中的...
HTML5实现颜色渐变3D文字特效源码.zip
11-04
5. **JavaScript交互**：HTML5中的JavaScript可以与DOM元素交互，实现动态效果。在这个颜色渐变3D文字特效中，JavaScript可能用于控制颜色变化的时机、速度以及3D旋转的角度，从而实现动态的交互体验。 6. **响应式...
JavaScript实现留言板案例
10-15
标题中的“JavaScript实现留言板案例”指的是使用JavaScript编程语言来创建一个基本的在线留言板功能。这个功能允许用户在网页上输入姓名和留言内容，并且能够显示和删除这些留言。描述中提到，示例代码详尽地解释了...
实现DOM元素平滑过渡变形动画的js插件
12-13
ramjet是一款可以实现DOM元素平滑过渡变形动画特效的js插件。该js插件可以从一个HTML DOM元素变形为另一种状态的DOM元素，在DOM元素变形的过程中会使用补间动画实现平滑过渡的动画效果。
html案例
ho622的博客
02-25 333
案例1 01.第一个HTML文件.html <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </html> [外链图片转存失败,源站...
1--HTML标签及案例实现
z12397_的博客
05-10 287
HTML入门概念快速入门标签学习文件标签文本标签图片标签列表标签链接标签div和span语义化标签表格标签案例：旅游网站首页 概念 HTML是最基础的网页开发语言。 * Hyper Text Markup Language 超文本标记语言 超文本: * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. 标记语言: * 由标签构成的语言。<标签名称> 如 html，xml * 标记语言不是编程语言 快速入门 语法： 1. html文档后缀名 .html 或者 .htm 2.
DOM案例之隐藏盒子
宅羽的博客
03-24 355
需求内容：//需求：点击案例，隐藏盒子。 //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。 //步骤： //1.获取事件源和相关元素 //2.绑定事件 //3.书写事件驱动程序主要知识点：var topBanner = document.getElementById("topBanner"); //topBanner.className += " hide"; //保留原
html实现功能实现原理,web 前端 @ 功能 JS 实现分析及其原理
weixin_29817791的博客
05-31 468
最近为实现一个新功能弄的焦头烂额 @xxx 的实现，在实现后写下些心得，供以后会跳入这坑的同志们参考。首先，当让是考虑使用范围，由于项目仅仅需要考虑在 WEBKIT 环境下使用，所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在Mozilla 开发者网络上发现 selection 和 range 这两个关于选区对象和光标对象，结合 Caret(一个用于判断当前光标位...
html实现功能实现原理,仿CSDN Blog返回页面顶部功能实现原理及代码_htm
weixin_33632843的博客
05-31 79
点评：仿CSDN Blog返回页面顶部功能只修改了2个地方：返回的速度-->改成了慢慢回去，返回顶部图标出现的时机-->改成了只要不在顶部就显示出来，具体代码如下，感兴趣的朋友可以参考下哈只修改了2个地方：，返回的速度-->改成了慢慢回去。(原来是一闪而返回)，返回顶部图标出现的时机-->改成了只要不在顶部就显示出来。(原来是向下滚动500px后才显示)注意：JS务必要写在...
js中怎么写html,javascript中且怎么表示？
weixin_29164185的博客
06-01 2752
“逻辑与”相当于生活中说的“并且”，就是两个条件都同时成立的情况下“逻辑与”的运算结果才为“真”。所以JavaScript中且用“&&”表示。逻辑与：符号为“&&”，只有两个操作数都是真，结果才是真。 逻辑与操作属于短路操作，既如果第一个操作数能够决定结果，那么就不会对第二个操作数求值。对于逻辑与操作而言，如果第一个操作数是假，则无论第二个操作数是什么值，结果都不可...
HTML判断如果并且,将html转换为js，并且其中含有判断语句
weixin_33262687的博客
06-11 133
一个layui框架的前端页面，希望将如下的代码转换为js{{# layui.each(d, function(index, item){ }}{{#if (item.imgUrl) { }} {{# }else{ }}暂无图片{{# } }}{{item.name}}SKU: {{item.sku}}供应商: {{item.supplierName}}价格:...
JavaScript DOM 注册事件
weixin_30666401的博客
05-19 128
一个HTML是一个DOM树，每一个节点都是DOM对象，整个HTML其实也是一个DOM对象，根节点是<html>; 在HTML页面初始化的时候，JavaScript会自动帮DOM对象注册消息（addEventListener，事件绑定），如果使用JavaScript的语法来创建节点也会自动注册消息。但是如果是通过String来添加的节点，那么该String里面的DOM就不会被自...
Jquery学习指南与Html5案例解析
除了基本功能，jQuery还有很多插件和扩展，如用于表单验证的jQuery Validation Plugin，用于图表展示的Highcharts，以及用于轮播图的Bootstrap Carousel等，这些插件极大地丰富了jQuery的功能，并且降低了开发复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值