JS DOM 实现删除和添加的功能
<!DOCTYPE html> <html>
<head>
<title>发表评论</title> <link rel="stylesheet" href="CSS/style.css">
<script language="javascript">
//用于在评论列表中添加一条评论信息,还有清空评论人和评论内容文本框
function addElement() {
//创建显示评论人的文本节点TextNode
var person1 = document.createTextNode(form1.person.value);
//创建显示评论内容的文本节点TextNode
var content1 = document.createTextNode(form1.content.value);
//创建td类型 的 Element节点
var td_person1 = document.createElement("td");
var td_content1 = document.createElement("td");
//创建一个tr类型 的 Elements节点
var tr = document.createElement("tr");
//创建一个tbody类型 的 Element节点
var tbody = document.createElement("tbody");
//将TextNode节点加入到td类型的节点
td_person1.appendChild(person1);
td_content1.appendChild(content1);
//将td类型的节点加入到tr类型的节点
tr.appendChild(td_person1);
tr.appendChild(td_content1);
//将tr类型的节点加入到tbody类型的节点
tbody.appendChild(tr);
//获取table对象 的 Id=comment
var tComment = document.getElementById("comment");
//将tbody节点 加入上一个table节点的后面
tComment.appendChild(tbody); form1.person.value = "";
form1.content.value = "";
} //用于将评论列表中的第一条评论信息删除,
function deleteFristE() {
//获取table对象 的 Id=comment
var dComment = document.getElementById("comment");
//如果获取的对象超过了两行,则删除第二行
if (dComment.rows.length > 1) {
//删除第二行
dComment.deleteRow(1);
}
} //用于将评论列表中的最后一条评论信息删除,
function deleteLastE() {
//获取table对象 的 Id=comment
var lComment = document.getElementById("comment");
//如果获取的对象超过了两行,则删除第二行
if (lComment.rows.length > 1) {
//删除第二行
lComment.deleteRow(lComment.rows.length - 1);
}
}
</script>
</head> <body>
<table width="600" height="70" border="0" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#FF9933"
bordercolordark="#FFFFFF" bgcolor="#666666">
<thead>
<tr>
<td width="14%" align="center" bgcolor="#FFFFFF"><img src="head.jpg" width="70" height="74"></td>
<td width="86%" align="left" bgcolor="#FFFFFF"> 人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……</td>
</tr>
</thead>
</table> <br> <table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666"
bordercolordark="#FFFFFF" id="comment">
<tr>
<td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
<td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
</tr>
</table>
<!-- --------------------------------------------------------------------->
<form name="form1" method="post" action="">
<table width="600" height="122" border="0" align="center" cellpadding="0" cellspacing="0"> <tr>
<td width="119" height="14"> </td>
<td width="481"> </td>
</tr> <tr>
<td height="27" align="center">评 论 人：</td>
<td>
<input name="person" type="text" id="person" size="40"> </td>
</tr> <tr>
<td align="center">评论内容：</td>
<td><textarea name="content" cols="60" rows="6" id="content"></textarea></td>
</tr>
<tr>
<td height="40"> </td>
<td><input name="Button" type="button" class="btn_grey" value="发表" onClick="addElement()">
<input name="Reset" type="reset" class="btn_grey" value="重置">
<input name="Button" type="button" class="btn_grey" value="删除第一条评论" onClick=" deleteFristE()">
<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()"></td>
</tr>
</table>
</form> </body>
</html>
<!--
body{
FONT-SIZE: 9pt;
margin-left:0px;
SCROLLBAR-FACE-COLOR: #E5BB93;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #ececec;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ececec;
SCROLLBAR-DARKSHADOW-COLOR: #999966;
BACKGROUND-COLOR: #fcfcfc }
a:hover {
font-size: 9pt; color: #FF6600;
}
a {
font-size: 9pt; text-decoration: none; color: #676767;
noline:expression(this.onfocus=this.blur);
}
td{
font-size: 9pt; color: #000000;
padding:5px;
}
.btn_grey {
font-family: "宋体"; font-size: 9pt;color: #333333;
background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999; }
hr{
border-style:solid;
height:1px;
color:#CCCCCC;
}
-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
JS DOM 实现删除和添加的功能的更多相关文章
- JS实现为控件添加倒计时功能
一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- PHP 结合 Boostrap 结合 js 实现学生列表删除编辑以及搜索功能（完结）
这个自己的小项目要先告一段落了.可能还有许多bug.请见谅 删除学生功能 PHP: // 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一 ...
- js中数组元素的添加和删除
js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1)直接添加通常都是这样 va ...
- Swift - 给表格添加编辑功能（删除，插入）
1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...
- 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- 给DOM生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
- JavaScript学习总结【5】、JS DOM
1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...
随机推荐
- .net敏捷开发框架 力软敏捷开发(learun) 让开发变的更简单
版本:6.1.6.2 体验地址:www.fishcmonkey.com 联系QQ:6539471
- [Linux] nginx管理员指南基本功能
1.运行时控制Nginx进程 NGINX有一个主进程和一个或多个工作进程. 如果启用了缓存,则缓存加载器和缓存管理器进程也会在启动时运行. 主进程的主要目的是读取和评估配置文件,以及维护工作进程. 工 ...
- springbooot2 thymeleaf 配置以及加载资源文件。Cannot find template location: classpath:/templates/ (please add some templates or check your Thymeleaf configuration)
最近在学习springbooot2 和 thymeleaf 程序文件 application.properties文件配置: #thymeleaf spring.thymeleaf.prefix=cl ...
- 异常: Bean named 'org.springframework.transaction.interceptor.TransactionInterceptor#0' is expected to be of type 'org.aopalliance.aop.Advice' but was actually of type 'org.springframework.transaction.i
场景: 在使用spring整合hibernate事务时报错解决: spring-aop中已经包含aopaliance,删除多余的jar包
- kafka消费者启动报错
报错信息: WARN Fetching topic metadata with correlation id 14 for topics [Set(test)] from broker [Broker ...
- BZOJ4484: [Jsoi2015]最小表示(拓扑排序乱搞+bitset)
Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 348 Solved: 172[Submit][Status][Discuss] Descriptio ...
- loj#6031. 「雅礼集训 2017 Day1」字符串(SAM 广义SAM 数据分治)
题意 链接 Sol \(10^5\)次询问每次询问\(10^5\)个区间..这种题第一感觉就是根号/数据分治的模型. \(K\)是个定值这个很关键. 考虑\(K\)比较小的情况,可以直接暴力建SAM, ...
- Android在程序崩溃或者捕获异常之后重新启动app
在Android应用开发中,偶尔会因为测试的不充分导致一些异常没有被捕获,这时应用会出现异常并强制关闭,这样会导致很不好的用户体验,为了解决这个问题,我们需要捕获相关的异常并做处理. 首先捕获程序崩溃 ...
- WPF:Hyperlink如何绑定数据
<TextBlock> <Hyperlink> <Run Text="{Binding PCFolderPath, Mode=OneWay}"/> ...
- (网页)bootstrap模态框手动关闭(转)
在菜鸟教程上的bootstrap 上面的模态框上看到的: 下面是一些可与 modal() 一起使用的有用的方法. $('#identifier').modal({ keyboard: false }) ...