huweiyi
- 浏览: 86154 次
- 性别:
- 来自: 重庆
-
文章分类
<!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 366由于最近在一个小项目需要把页面和后台分开， ... -
js操作数据
2015-09-25 14:40 511处理数组的方法很多，javascript splice()算是 ... -
js中(function(){})()说明
2015-09-25 11:59 375js中自执行匿名函数 格式：(function() {//co ... -
js的Prototype属性 解释及常用方法
2015-09-25 11:44 435函数：原型每一个构造函数都有一个属性叫做原型(prototy ... -
js精品
2015-03-20 13:04 01. oncontextmenu="window.e ... -
js全套函数
2014-09-17 11:54 4321.document.write(""); ... -
javascript中正则表达式
2014-08-08 10:52 467正则表达式语法： 正则表达式重复： 选择、分组 ... -
javascript中call
2014-08-01 16:33 552[b]Person类对象转换（我觉得是种实例化对象后， 继承的 ... -
javascript中prototype
2014-07-23 10:42 461用过JavaScript的同学们肯定都对prototype如雷 ... -
javascript中data用法
2014-01-13 11:24 602var d = new Date();//Date对象需要创建 ... -
js完成跑马灯程序
2014-02-08 16:56 666<!Doctype html> <html& ... -
两个下拉列表的移动(只完成左到右，右到左原理相同)
2014-02-08 16:56 516<!DOCTYPE html PUBLIC " ... -
动态添加select选项
2013-12-26 15:58 536<!DOCTYPE html PUBLIC " ... -
js判断两个日期的大小和判断输入框的值是否为空
2013-12-26 15:40 971/*******************js判断日期的大小** ... -
js中setInterval与setTimeout用法
2013-12-23 13:42 415setTimeout 定义和用 ... -
正则表达式
2013-09-16 11:36 500匹配中文字符的正则表达式： [u4e00-u9fa5] 评注 ... -
showModalDialog
2013-07-12 11:29 377JS中showModalDialog 详细使用 基本介绍： ... -
javascipt 总结
2013-07-10 21:36 477typeof（）： 是判断数据的类型，例如：alert（typ ...
相关推荐
在易语言中处理表格数据时，高级表格复制粘贴功能是一项重要的技术，它能帮助用户高效地管理并操作大量数据。 易语言高级表格复制粘贴源码通常涉及到以下几个关键知识点： 1. **数据结构与表格对象**：在易语言中...
- **右键功能**：通过右键菜单，用户可以访问更多高级操作，如复制、粘贴、撤销、重做等，这些是Excel等电子表格软件中的常见功能。 2. **JavaScript实现**： - JavaScript是实现此功能的关键技术，它负责处理...
4. 多选与操作：提供多行、多列选择，以及剪切、复制、粘贴、删除等操作。 5. 分页与滚动：对于大量数据，实现分页加载，同时提供平滑的滚动体验。 6. 表格样式：支持自定义表格样式，包括边框、背景色、字体等，以...
开发者可以通过JavaScript调用各种接口，实现对表格的动态操作，如添加、删除、修改单元格，或者实现复杂的业务逻辑。 总的来说，ZCELL作为一款纯JavaScript实现的仿Excel表格插件，不仅提供了丰富的功能，而且易于...
8. **表格操作**：JTable支持排序、选择、复制和粘贴功能。你可以通过`setAutoCreateRowSorter(true)`启用自动排序，`setSelectionMode(ListSelectionModel.SINGLE_SELECTION)`设定单选模式。 9. **性能优化**：...
如果要将多个工作簿的数据合并到一个新的工作簿中，可以创建一个新的工作簿，然后逐个复制和粘贴数据。例如： ```vba Dim newWb As Workbook Set newWb = Workbooks.Add ' 假设已打开多个工作簿 For Each wb ...
- 可以通过复制粘贴或使用Excel的“获取数据”功能，从Word表格中导入数据。对于大量数据，可以编写VBA宏来实现自动化，提高效率。 3. **VBA编程**： - VBA是Microsoft Office套件中的一种内置编程语言，可以用来...
复制区域时，使用“选择性粘贴”可以灵活地保持或改变源数据的格式和运算。 此外，Excel还支持自动填充功能，允许用户快速生成等差、等比序列或日期序列，极大地提高了数据输入效率。通过编辑-填充-序列可以快速...
- **移动和复制单元格**: 使用剪切、复制和粘贴功能，可将单元格内容移动或复制到其他位置。 - **填充单元格区域**: 使用填充柄可以快速复制单元格的值或公式到相邻的单元格。 - **插入和删除行、列和单元格**: ...
每个工作簿可以有多个工作表，用户可以自由添加、删除、重命名和移动工作表。此外，多窗口操作使得同时编辑或浏览不同工作表变得方便，而工作表的拆分和冻结功能则有助于查看大量数据时保持清晰的视图。 单元格是...
比如，使用快捷键能大大提高效率，比如Ctrl + C和Ctrl + V分别代表复制和粘贴，Ctrl + B加粗字体，Ctrl + I斜体，Ctrl + U下划线。还可以通过设置条件格式来根据单元格内容自动改变格式，利用数据有效性功能限制...
303. 将 EXCEL 单元格转换成图片形式插入到 WORD 中：使用“复制”和“粘贴”功能将 EXCEL 单元格转换成图片形式插入到 WORD 中。 这些图形和图表编辑技巧可以帮助用户快速掌握图形和图表编辑操作，提高工作效率。 ...
用户可以根据需要添加或删除行，以便创建不同的点和曲线。这些点可以被用来创建样条曲线，而这些样条曲线可以被用来创建放样曲面。 三、打开 CATIA V5 并创建点和曲线 在打开 CATIA V5 之后，用户需要进入 ...
你可以先在总表输入、在记录单逐条录入、导入或复制粘贴原始成绩，经设置表简单设置后即可在“表册”中根据你的需要自动生成各种表册，包括分班成绩册等各种表册、成绩单、各种统计表等。 ※※※※二、与众不同 本人...
1. **文本编辑**：包括输入、删除、复制、粘贴、查找与替换、格式化文本（如字体、字号、颜色、下划线、斜体、粗体等）以及段落格式设置（如对齐方式、行距、段前段后、首行缩进等）。 2. **word表格处理**：创建...
7. 复制和移动段落：选定后，使用“编辑”菜单的“复制/剪切”和“粘贴”命令。 8. 合并段落：通过删除或退格键实现。 9. 首字下沉：在“格式”菜单中选择“首字下沉”。 10. 项目符号和编号：选定文字，通过“格式...
《企业管理用表-excel表格使用技巧大全》是一份详尽的文档，包含了163种Excel操作技巧，旨在帮助企业管理人员高效地使用Excel进行数据分析、报表制作等任务。以下是一些关键知识点的概述： 1. **快速选中全部工作表...
在Excel中，隔行插入和删除空行是常见的数据整理任务，特别是在处理大量表格数据时。宏（Macros）是一种非常强大的工具，可以自动化这些重复性工作，大大提高工作效率。本篇将详细介绍如何使用宏来实现Excel隔行插入...