仿作的一个简单的例子，供和我一样的初学者参考,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JavaScript实现动态的效果</title>
<script type="text/javascript">
function addSort(){
var name = document.getElementById("name").value;
if(name==""){
return;
}
var row=document.createElement("tr");
//创建文本
row.setAttribute("id",name);
var cell=document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
cell=document.createElement("td");
var deleteButton=document.createElement("input");//创建按钮
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","删除");
deleteButton.onclick=function doDelete(){deleteSort(name);}
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
document.getElementById("name").value="";
}
//删除一条记录的函数
function deleteSort(id){
var row = document.getElementById(id);
document.getElementById("sortList").removeChild(row);
}
</script>
</head>
<body>
<table align="center" border="0">
<tr>
<td colspan="2" bgcolor="#C0DCC0" align="center">用户信息管理</td>
</tr>
<tr>
<td>添加用户:</td>
<td><input type="text" id="name"> <input type="button" onclick="addSort();" value="确认添加"></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="1">
<tr>
<td height="20" valign="top" align="center">用户名称</td>
<td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
DOM精简版– 一个小的DOM实现，其中实现了文档中的大多数DOM属性和方法。 例子 var document = require ( "dom-lite" ) . document ; var el = document . createElement ( "h1" ) ; el . id = 123 ; el . ...
标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption...
属元素 确定对象是否为HTMLElement （来自任何Realm ）。 安装 >= 10 。 要安装，请在命令行中... createElement ( 'div' ) ) ; //-> true isDOMElement ( document . createTextNode ( 'content' ) ) ; //-> false
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 实例 <p id=p1>This is a paragraph. <p id=p2>This...
本文实例讲述了JavaScript DOM节点操作方法。分享给大家供大家参考，具体如下： 使用DOM可以新建HTML元素，也可以删除已有的HTML元素。 （一）新建元素： [removed] //创建新的 <p> 元素 var newEle=document....
本文实例讲述了JS添加或删除HTML dom元素的方法。分享给大家供大家参考，具体如下： 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 这...
一个可以模拟DOM API足以渲染HTML的Document虚拟对象。 例子 var dommy = require ( 'dommy' ) ; var document = dommy ( ) ; var html = document . createElement ( 'html' ) ; var body = document . ...
本文实例讲述了JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作。分享给大家供大家参考，具体如下： createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild createElement ...
document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二、创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用，...
XMLDocument 获取对由对象引出的的 XML 文档对象模型(DOM)的引用。 XSLDocument 获取对 XSL 文档的顶层结点的引用。 属性 集合 集合 描述 all 返回对象所包含的元素集合的引用。 anchors 获取所有带有 ...
JavaScript HTML DOM 元素 (节点) 本章节介绍如何向文档中添加和移除元素(节点)。 创建新的 HTML 元素 (节点) – appendChild() 要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。 ...
ezdom 简单的 DOM 操作。 var theDiv = document . querySelector ( '.some-div' ) ;var theNewDiv = document . createElement ( 'div' ) ;theNewDiv . innerHTML = theDiv . innerHTML ;theNewDiv . appendChild ...
在Python中解析XML文件也有Dom和Sax两种方式，这里先介绍如何是使用Dom解析XML，这一篇文章是Dom生成XML文件，下一篇文章再继续介绍Dom解析XML文件。 在生成XML文件中，我们主要使用下面的方法来完成。 主要方法 1、...
创建元素：createElement，createTextNode 操作元素：appendChild，attr，style 事件与事件处理 课03：函数式Javascript -2018.02.28。 作为对象发挥作用 回呼 闭包 功能组合 数组功能 每次 指
利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下:var oNewP = $(“使用jQuery创建的...
利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的...
JSML 什么是JSML？ JSML是使用Javascript数组和对象HTML的紧凑表示形式。 JSML还是一个小型... JSML使用document.createElement（） ， document.createTextNode（）和document.appendChild（）直接建立DOM表
<!DOCTYPE html> ...var node=document.createTextNode(这是新段落。); para.appendChild(node); //将node里面的str放到h1段落中 //使之成为这是新段落</h1> var element=document.getElementById(di
DOM：就是用JavaScript操作HTML节点。 知识点： 将HTML变成DOM树 看到HTML会画DOM树。 创建节点，添加节点，删除节点 varnodeObj = document.createElement(“节点名”); //创建元素节点 document.createTextNode(...
Delphi7向常用的XML文件中添加内容，按照XML的节点规则依次写入内容，自定义各个节点及节点内容，具体的操作代码如下示： var iXml: IDOMDocument; iRoot, iNode, iNode2, iChild, iAttribute: IDOMNode; ...