huweiyi
- 浏览: 81661 次
- 性别:
- 来自: 重庆
-
文章分类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table tr{
height:40px;
}
</style>
<script language="javascript">
function addRow() {
var tableElement = document.getElementsByTagName("table")[1];
var trs = tableElement.rows
//alert("tr行数"+trs.length);
/*
//第一种方法
var trElement = document.createElement("tr");
var tdNameElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
tdNameElement.appendChild(tdNameTextNode);
var tdEmailElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("email").value);
tdEmailElement.appendChild(tdNameTextNode);
var tdTelElement = document.createElement("td");
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
tdTelElement.appendChild(tdTelTextNode);
var tdDeleteElement = document.createElement("td");
trElement.appendChild(tdNameElement);
trElement.appendChild(tdEmailElement);
trElement.appendChild(tdTelElement);
trElement.appendChild(tdDeleteElement);
var tbodyElement = tableElement.childNodes;
for (var i = 0; i < tbodyElement.length; i++) {
if (tbodyElement[i].nodeName == "TBODY") {
tbodyElement[i].appendChild(trElement);
}
}*/
//第二种方法
var row = tableElement.insertRow();
//第一个单元格
var nameCell = row.insertCell();
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
nameCell.appendChild(tdNameTextNode);
//第二个单元格
var emailCell = row.insertCell();
var tdEmailTextNode = document.createTextNode(document.getElementById("email").value);
emailCell.appendChild(tdEmailTextNode);
//第三个单元格
var telCell = row.insertCell();
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
telCell.appendChild(tdTelTextNode);
//第四个单元格
var deleteCell = row.insertCell();
deleteCell.innerHTML="<a href='javascript:void(0)' onclick='del(this);'>delete</a>";
}
function del(node) {
//alert(node.parentNode.parentNode.nodeName);
trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
</script>
</head>
<body>
<center>
<div>添加用户</div>
<table border="1" width="60%">
<tr>
<td>
姓名：<input name="name" id="name"/>
</td>
<td>
email:<input name="email" id="email"/>
</td>
<td>
tel:<input name="tel" id="tel"/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="提交" onclick="addRow();"/>
</td>
</tr>
</table>
<table border="1" width="60%" style="margin-top:50px;">
<colgroup>
<col width="20%"/>
<col width="30%"/>
<col width="30%"/>
<col width="20%"/>
</colgroup>
<tr height="28px;">
<td>姓名</td>
<td>email</td>
<td>电话</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>1162681603@qq.com</td>
<td>15923736935</td>
<td><a href="javascript:void(0)" onclick="del(this);">delete</a> </td>
</tr>
</table>
</center>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table tr{
height:40px;
}
</style>
<script language="javascript">
function addRow() {
var tableElement = document.getElementsByTagName("table")[1];
var trs = tableElement.rows
//alert("tr行数"+trs.length);
/*
//第一种方法
var trElement = document.createElement("tr");
var tdNameElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
tdNameElement.appendChild(tdNameTextNode);
var tdEmailElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("email").value);
tdEmailElement.appendChild(tdNameTextNode);
var tdTelElement = document.createElement("td");
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
tdTelElement.appendChild(tdTelTextNode);
var tdDeleteElement = document.createElement("td");
trElement.appendChild(tdNameElement);
trElement.appendChild(tdEmailElement);
trElement.appendChild(tdTelElement);
trElement.appendChild(tdDeleteElement);
var tbodyElement = tableElement.childNodes;
for (var i = 0; i < tbodyElement.length; i++) {
if (tbodyElement[i].nodeName == "TBODY") {
tbodyElement[i].appendChild(trElement);
}
}*/
//第二种方法
var row = tableElement.insertRow();
//第一个单元格
var nameCell = row.insertCell();
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
nameCell.appendChild(tdNameTextNode);
//第二个单元格
var emailCell = row.insertCell();
var tdEmailTextNode = document.createTextNode(document.getElementById("email").value);
emailCell.appendChild(tdEmailTextNode);
//第三个单元格
var telCell = row.insertCell();
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
telCell.appendChild(tdTelTextNode);
//第四个单元格
var deleteCell = row.insertCell();
deleteCell.innerHTML="<a href='javascript:void(0)' onclick='del(this);'>delete</a>";
}
function del(node) {
//alert(node.parentNode.parentNode.nodeName);
trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
</script>
</head>
<body>
<center>
<div>添加用户</div>
<table border="1" width="60%">
<tr>
<td>
姓名：<input name="name" id="name"/>
</td>
<td>
email:<input name="email" id="email"/>
</td>
<td>
tel:<input name="tel" id="tel"/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="提交" onclick="addRow();"/>
</td>
</tr>
</table>
<table border="1" width="60%" style="margin-top:50px;">
<colgroup>
<col width="20%"/>
<col width="30%"/>
<col width="30%"/>
<col width="20%"/>
</colgroup>
<tr height="28px;">
<td>姓名</td>
<td>email</td>
<td>电话</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>1162681603@qq.com</td>
<td>15923736935</td>
<td><a href="javascript:void(0)" onclick="del(this);">delete</a> </td>
</tr>
</table>
</center>
</body>
</html>
分享到：
发表评论
-
ajax跨域
2016-05-03 13:53 331由于最近在一个小项目需要把页面和后台分开， ... -
js操作数据
2015-09-25 14:40 484处理数组的方法很多，javascript splice()算是 ... -
js中(function(){})()说明
2015-09-25 11:59 346js中自执行匿名函数 格式：(function() {//co ... -
js的Prototype属性 解释及常用方法
2015-09-25 11:44 410函数：原型每一个构造函数都有一个属性叫做原型(prototy ... -
js精品
2015-03-20 13:04 01. oncontextmenu="window.e ... -
js全套函数
2014-09-17 11:54 4081.document.write(""); ... -
javascript中正则表达式
2014-08-08 10:52 441正则表达式语法： 正则表达式重复： 选择、分组 ... -
javascript中call
2014-08-01 16:33 520[b]Person类对象转换（我觉得是种实例化对象后， 继承的 ... -
javascript中prototype
2014-07-23 10:42 443用过JavaScript的同学们肯定都对prototype如雷 ... -
javascript中data用法
2014-01-13 11:24 573var d = new Date();//Date对象需要创建 ... -
js完成跑马灯程序
2014-02-08 16:56 643<!Doctype html> <html& ... -
两个下拉列表的移动(只完成左到右，右到左原理相同)
2014-02-08 16:56 481<!DOCTYPE html PUBLIC " ... -
动态添加select选项
2013-12-26 15:58 512<!DOCTYPE html PUBLIC " ... -
js判断两个日期的大小和判断输入框的值是否为空
2013-12-26 15:40 927/*******************js判断日期的大小** ... -
js中setInterval与setTimeout用法
2013-12-23 13:42 393setTimeout 定义和用 ... -
正则表达式
2013-09-16 11:36 466匹配中文字符的正则表达式： [u4e00-u9fa5] 评注 ... -
showModalDialog
2013-07-12 11:29 350JS中showModalDialog 详细使用 基本介绍： ... -
javascipt 总结
2013-07-10 21:36 446typeof（）： 是判断数据的类型，例如：alert（typ ...
相关推荐
你可以先在总表输入、在记录单逐条录入、导入或复制粘贴原始成绩，经设置表简单设置后即可在“表册”中根据你的需要自动生成各种表册，包括分班成绩册等各种表册、成绩单、各种统计表等。 ※※※※二、与众不同 本人...
33、表格的修改 34、表格内数据排序和计算 35、绘制斜线表头 36、混排表格和文字 37、插入图形：从剪贴板粘贴、剪贴图和图形文件 38、插入"艺术字" 39、编辑图形：调整图形大小、剪贴图形、改变图片位置和删除图片 ...
3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 ...
3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 ...
这时先不要忙着把B列和C列删除，先要把D列的结果复制一下，再用“选择性粘贴”命令，将数据粘贴到一个空列上。这时再删掉B、C、D列的数据。下面是一个“&”实际应用的例子。用AutoCAD绘图时，有人喜欢在EXCEL中存储...
4.2.11创建和删除表格 77 4.2.12创建和删除外键 78 4.2.13创建和删除索引 79 4.2.14生成SQL语句 80 4.2.15建立到MySQL数据库的连接 81 4.3小结 82 4.4参考资料 82 第五章 开发JDBC应用 83 5.1系统需求 83 5.2创建...
1、本功能可以在不同工程之间、不同文件中，不同时间，不同位置自由复制粘贴（section打开就可以）。即便是复制后，再打开其他文件，也可以粘贴。 2、完美支持超级复制粘贴，即使是区有问题，也能完美复制。 操作...
一个基于Vue3.x + TypeScript的在线演示文稿应用，还原了大部分PPT常用功能，支持文字，图片，形状，线条，图表，表格6种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和快捷菜单，重新...
你可以先在总表输入、在记录单逐条录入、导入或复制粘贴原始成绩，经设置表简单设置后即可在“表册”中根据你的需要自动生成各种表册，包括分班成绩册等各种表册、成绩单、各种统计表等。 ※※※※二、与众不同 本人...
9.9 表格（Table、TableItem和TableColumn） 178 9.9.1 Table、TableItem和TableColumn的关系 182 9.9.2 设置带有选择框的表格 182 9.9.3 设置可同时选中多行表格 183 9.9.4 可拖动的表格 184 9.9.5 设置...
8.可设置自动暂停生成时间，生成后会提示将刚生成的防伪码以Excel电子表格或txt文本文档形式导出到本机，也可一键直接复制粘贴到本机文档。 9.可批量添加.删除.加密防伪码。 10.防伪码采用不可逆MD5加密处理，即使...
参会人员临时因故不能参会或增加人员，这种情况在会议开始头一天甚至会前经常发生，工作人员就需要在已经编排好的Excel表格中再插入或删除人员的姓名，轮番的“复制、粘贴”。如果参会人员多，往往错一个人，就需要...
8、可设置自动暂停生成时间，生成后会提示将刚生成的防伪码以Excel电子表格或txt文本文档形式导出到本机，也可一键直接复制粘贴到本机文档。 9、可批量添加、删除、加密防伪码。 10、防伪码采用不可逆MD5加密处理，...
数据可以选择、打印、复制、粘贴等，包括到/从Excel； 可以添加/删除行； 列可以有不同的对齐方式（右/中/左）和编辑器（复选框/下拉/...）； 可以为多个事件（数据更改、结构更改、鼠标单击等）指定回调函数，并且...
Google脚本 Google脚本，用于在表格中自动执行任务并从... 编辑单元格时，脚本将直接在表格中运行，或者在“帮助”之后添加新的菜单项。 设置“表单上的删除选项”要稍微复杂一些（按照代码文件中的说明进行操作）。