<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,尝试之后觉得非常不错
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 ...
全局jsdom 在Node.js中启用DOM global-jsdom将document , window和其他DOM API注入到您的Node.js环境中。 这使您可以在Node.js中运行浏览器测试。 在global设置的特定属性直接来自您已安装的jsdom版本。安装要求> =...
下面小编就为大家带来一篇js操作DOM--添加、删除节点的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
js-dom-and-events-modifying-html-readme-v-000-源码.rar
业力-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 企业...
前端开源库-jsdom-papandreouJSDOM Papandreou,一个DOM和HTML标准的JavaScript实现
下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
JavaScript-DOM--:JavaScript DOM编程艺术源代码
jsdom-devtools格式化程序 简而言之:不要像这样通过检查其实现对象来尝试理解的元素代表什么: …让我们像检查它们一样,将它们视作真正HTML元素: 典型的用例是一些在Node.js环境中利用脚本/测试,例如 。 ...
前端开源库-jsdom-littlejsdom小而轻的精简版jsdom,无需上下文化
JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布 JavaScript DOM-交互式和动态JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的...
returning-DOM-elements-javascript-源码.rar
开玩笑的环境jsdom十六Jest v26随JSDOM @ 16一起提供,因此没有理由使用此软件包 v25默认情况下使用 15支持 。此软件包还应该与Jest 24及更早版本兼容。 该软件包随JSDOM v16一起提供,它还支持。 如果您需要比Jest...
jsdom-testing-mocks 一组用于在jsdom环境中模拟浏览器行为的工具 安装 npm install --save-dev jsdom-testing-mocks 或者 yarn add -D jsdom-testing-mocks 模拟视口 模拟matchMedia ,允许根据视口描述测试组件的...
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' )...
javaScript-DOM编程艺术javaScript-DOM编程艺术javaScript-DOM编程艺术javaScript-DOM编程艺术
dom-to-image.js 个人修改源码之后,支持嵌入iframe的网页截图。 导入js,直接调用shotScreen()函数即可。
react-dom.js