<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function add(){
var form1 = document.getElementById("form1");
var parentNode = document.getElementById("users");
//生成textNode对象
var tn1Obj = document.createTextNode(form1.user.value);
var tn2Obj = document.createTextNode(form1.email.value);
var tn3Obj = document.createTextNode(form1.tel.value);
var tn4Obj = document.createTextNode("DEL");
//生成td对象
var td1Obj = document.createElement("td");
var td2Obj = document.createElement("td");
var td3Obj = document.createElement("td");
var td4Obj = document.createElement("td");
td1Obj.appendChild(tn1Obj);
td2Obj.appendChild(tn2Obj);
td3Obj.appendChild(tn3Obj);
td4Obj.appendChild(tn4Obj);
//生成tr对象
var trObj = document.createElement("tr");
trObj.appendChild(td1Obj);
trObj.appendChild(td2Obj);
trObj.appendChild(td3Obj);
trObj.appendChild(td4Obj);
parentNode.appendChild(trObj);
}
function del(x){
var y = x.parentNode;
var z = x.parentNode.parentNode;
z.removeChild(y);
}
</script>
</head>
<body>
[align=center]
添加用户
<form action="" id="form1">
用户 <input type="text" id="user" />
email <input type="text" name="email" />
电话 <input type="text" name="tel" />
<input type="button" onclick="add()" value="添加">
</form>
[/align]
<hr>
[align=center]
<table id="users" border="1">
<tr>
<td>tom</td>
<td>tom@tom.com</td>
<td>500</td>
<td onclick="del(this)"><font color="red">DEL</font></td>
</tr>
<tr>
<td>Jerry</td>
<td>Jerry@tom.com</td>
<td>600</td>
<td onclick="del(this)"><font color="red">DEL</font></td>
</tr>
</table>
[/align]
</body>
</html>
分享到：
相关推荐
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
全局jsdom 在Node.js中启用DOM global-jsdom将document ， window和其他DOM API注入到您的Node.js环境中。 这使您可以在Node.js中运行浏览器测试。 在global设置的特定属性直接来自您已安装的jsdom版本。安装要求> =...
`jsdom` 是一个JavaScript实现的DOM（文档对象模型）库，它允许在Node.js环境中运行浏览器的API。这个开源项目为开发者提供了在服务端操作和解析HTML与XML文档的能力，尤其在进行自动化测试、数据抓取或模拟浏览器...
开玩笑的环境jsdom十六Jest v26随JSDOM @ 16一起提供，因此没有理由使用此软件包 v25默认情况下使用 15支持 。此软件包还应该与Jest 24及更早版本兼容。 该软件包随JSDOM v16一起提供，它还支持。 如果您需要比Jest...
业力-jsdom-launcher 启动器。 安装 npm install karma-jsdom-launcher --save-dev 注意： karma和jsdom是此模块的peerDependencies。 如果尚未安装，请运行 npm install karma-jsdom-launcher jsdom karma --save...
茉莉花节点jsdom-extjs-testing-tool 使用 jasmine-node 和 jsdom 的功能性前端 Ext.JS 测试自动化工具如果您已经安装了节点包模块（ ），安装将为您获取所需的库。Ext.JS 设置使用 Ext.JS 包并遵循 Sencha cmd 企业...
这个压缩包"js-dom-and-events-modifying-html-readme-v-000-源码.rar"包含的源码很可能是一系列关于使用JavaScript操作DOM和处理事件的示例。 **DOM基础** DOM是一个树形结构，其中每个节点代表HTML文档的一部分...
dom-to-image.js 个人修改源码之后，支持嵌入iframe的网页截图。 导入js，直接调用shotScreen()函数即可。
domtoimage图片下载插件,用于将dom节点转换成图片,然后就可以下载下来
jsdom-devtools格式化程序 简而言之：不要像这样通过检查其实现对象来尝试理解的元素代表什么： …让我们像检查它们一样，将它们视作真正HTML元素： 典型的用例是一些在Node.js环境中利用脚本/测试，例如 。 ...
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前，让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
本文将介绍如何在JavaScript中添加和删除DOM节点的示例。 ### 添加节点 在JavaScript中添加节点主要通过`document.createElement`方法创建新元素，然后通过`appendChild`方法将其添加到父元素中。具体步骤如下： ...
**前端开源库-dom-element-watcher** 是一个专为前端开发者设计的轻量级库，它的主要功能是**监视DOM元素的变化**。在Web开发中，DOM（文档对象模型）是HTML或XML文档的结构化表示，它允许JavaScript与网页内容进行...
JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...
jsdom-testing-mocks 一组用于在jsdom环境中模拟浏览器行为的工具 安装 npm install --save-dev jsdom-testing-mocks 或者 yarn add -D jsdom-testing-mocks 模拟视口 模拟matchMedia ，允许根据视口描述测试组件的...
html-dom-parser 在服务器（Node.js）和客户端（浏览器）上均可使用HTML到DOM解析器： HTMLDOMParser(string[, options])解析器将HTML字符串转换为描述DOM树JavaScript对象。例子const parse = require ( '...
- **错误处理**：添加适当的错误处理机制，比如当DOM元素不存在或者JavaScript执行失败时，能够给出清晰的反馈。 文件"dom-to-image说明.docx"可能包含关于如何使用dom-to-image库的详细说明，而"dom-to-image.js...
听说你在找react-dom.development.js这个文件，在带走它前记得收藏加点赞、听说你在找react-dom.development.js这个文件，在带走它前记得收藏加点赞、听说你在找react-dom.development.js这个文件，在带走它前记得...
dom到pdf dom-to-pdf使用HTML5 canvas和svg从DOM节点生成可打印的PDF。 安装 npm install --save dom-to-pdf 用法 var domToPdf = require ( 'dom-to-pdf' ) ; var element = document . getElementById ( 'test' )...
2. **跨平台兼容性**: 作为一款前端开源库，html-dom-parser通常支持多种运行环境，包括浏览器环境和Node.js服务器环境。这使得开发者可以在客户端和服务器端都能进行HTML的解析和操作，实现前后端的数据同步和...