javascript表格的添加和删除
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
var oTab = document.getElementById("tb1"); var oBtn = document.getElementById("btnAdd");
var oName = document.getElementById("txtName");
var oAge = document.getElementById("txtAge");
oBtn.onclick = function () {
var oTr = document.createElement("tr");
//第一列
var oTd = document.createElement("td");
//alert(oTab.tBodies[0].rows.length + 1);
oTd.innerText = oTab.tBodies[0].rows.length + 1;
oTr.appendChild(oTd);
//第二列
var oTd = document.createElement("td");
// alert(oName.value);
oTd.innerText = oName.value;
oTr.appendChild(oTd); //第三号
var oTd = document.createElement("td");
// alert(oAge.value);
oTd.innerText = oAge.value;
oTr.appendChild(oTd); //第三号
var oTd = document.createElement("td");
// alert(oAge.value);
oTd.innerText = "<a href='javascript:void(0);'>删除</a>";
oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick = function () {
oTab.removeChild(this.parentNode.parentNode);
}; oTab.tBodies[0].appendChild(oTr);
}
}
</script>
</head>
<body>
姓名:<input type="text" id="txtName" />
年龄:<input type="text" id="txtAge" />
<input type="button" id="btnAdd" value="添加" />
<input type="button" id="btnDel" value="删除" />
<table id="tb1" border="1" style="width: 500px;">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cupid</td>
<td>66</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Fly</td>
<td>45</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Sky</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>Windy</td>
<td>98</td>
</tr>
<tr>
<td>5</td>
<td>Snow</td>
<td>09</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
javascript表格的添加和删除的更多相关文章
- js动态添加-表格逐行添加、删除、遍历取值
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
- [django]表格的添加与删除实例(可以借鉴参考)
自己并未采用任何表格插件,参考网上例子,自己编写出来的django网页实例,请各位参考! 首先看图做事,表格布局采用bootstrap,俗话说bootstrap橹多了就会css了,呵呵,下面看图: 上 ...
- javascript;select动态添加和删除option
<select id="sltCity"></select> //添加Option. var optionObj = new Option(text, va ...
- 利用jquery动态添加和删除表格的一行,并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- Javascript DOM 03 表格添加、删除 + 搜索
获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用 ...
- 基于JavaScript的表格设计:按序添加或删除班级的学生信息
目的: 制作一个表格,显示班级的学生信息 功能: 鼠标移到不同行,背景色发生改变,离开恢复原背景色 添加.删除按钮,可添加,可删除. 程序流程: 首先先建立绑定事件函数. 其次建立鼠标移动改变背景色函 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- JavaScript实验一(添加节点,删除节点)
静态html页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
随机推荐
- exynos 4412 电源管理芯片PMIC 的配置及使用方法
/** ****************************************************************************** * @author Maox ...
- HTML5应用开发:JavaScript库iScroll教程
目录 1. iScroll介绍 2. 安装和使用 3. 简单的iScroll例子 4. Pinch & Zoom 5. Snap to element 6. iScroll 详细参数 1. i ...
- CentOS安全设置
删除多余的用户和用户组,修改口令文件属性,禁止[Ctrl+Alt+Delete]重启命令,防止别人ping的方法.整理自互联网. 1.删除多余的用户和用户组 //删除多余用户 # vi /etc/pa ...
- jquery文字上下滚动的实现方法
jquery实现文字上下滚动的方法. 代码: //上下滚动var textRoll=function(){$('#notice p:last').css({'height':'0px','opacit ...
- Delphi XE5教程11:Tokens
内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误!也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者可 ...
- DataSnap中连接池的应用
当开发人员开始创建Delphi的DataSnap应用时很常见的数据库连接定义方式是每个数据模块建立一个连接.这样做将产生大量的数据库连接,并产生很多问题.从Delphi XE开始,EMB提供了Sess ...
- 爱重启的windows,伤不起
.
- MySQL 从库日志比主库多
在群里聊天的时候,一个群友说,生产库主库宕机,但是主从数据库数据一致,但是从库的日志比主库多,很是不理解! 咨询后发现,生产库的主库没有设置sync_binlog=1,而是为sync_binlog=0 ...
- Context详解
前言 Context在android中的作用不言而喻,当我们访问当前应用的资源,启动一个新的activity的时候都需要提供Context,而这个Context到底是什么呢,这个问题好像很好回答又好像 ...
- tcp-client-c++
#include "stdafx.h" #include <Winsock2.h> #include <iostream> #pragma comment( ...