核心代码:
<script type="text/javascript">
function removeTable(){
var objDiv = document.getElementById("divid")
var vtables = objDiv.childNodes//
if (vtables.length >0)
objDiv.removeChild(vtables[vtables.length - 1])
}
</script>
<input type="button" value="删除表格" onclick="javascript:removeTable()" />
===============================================
<!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/htmlcharset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript">
function createTable(){
var objDiv = document.getElementById("divid")
var vtable=document.createElement("table")
// vtable.id="idTB"
vtable.cellPadding="0",
vtable.cellSpacing="0"
vtable.border="1"
vtable.color="#000000"
vtable.borderColorDark="#000000"
vtable.borderColorLight="#FFFFFF"
for(i=0i<1i++){
var vtr=vtable.insertRow(i)//insertRow插入行
for(k=0k<5k++){
vtd=vtr.insertCell(k)//insertCell插入列
vtd.innerHTML="<input type=text style='border:0px solid'>"// InnerHtml 是用来获取或设置位于指定的服务器控件的开始标记和结束标记之间的内容。
}
}
objDiv.appendChild(vtable)//appendChild方法可向节点的子节点列表的末尾添加新的子节点。此方法可返回这个新的子节点。
}
function mouseDown(){
if(event.button==2) {
if(event.srcElement.tagName="INPUT"){ //srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
//tagName 属性返回被选元素的标签名。
window.confirm(event.srcElement.value)
}
}
}
document.onmousedown=mouseDown//onmousedown 事件会在鼠标按键被按下时发生
document.captureEvents(Event.MOUSEDOWN)
/* function RemoveRow()
{
oTR=idTB.rows(idTB.rows.length-1)
oTR.removeNode(true)
} */
function removeTable(){
var objDiv = document.getElementById("divid")
var vtables = objDiv.childNodes//
if (vtables.length >0)
objDiv.removeChild(vtables[vtables.length - 1])
}
</script>
</head>
<input type="button" value="创建表格" onclick="javascript:createTable()" />
<input type="button" value="删除表格" onclick="javascript:removeTable()" />
<!-- <input type="button" onclick="RemoveRow()" value="减一行">-->
<div id="divid"></div>
<body>
</body>
</html>
几点意见：
1.象1楼说的，<div id="divid"></div>应该放在body里。
2.<script标签的属性不对。
3.直接引用id当作对象本身只在IE下有效，应该用document.getElementById("")来获取对象。
其他你看我给你的页面吧，已经在DW里优化过了。
这个嘛，太简单。。。。注意的是比如第一列 ，tr中一个span，一个input，当span显示的时候，input隐藏，input显示时span隐藏就好了，，，，原理基本这样最后保存或删除，修改的时候用ajax向数据库提交就行了，，，原理基本这样，，，自己想一下哈，有利于自己发展DOM（文档对象模型）是由W3C制定的一套访问和 *** 作XML（eXtensible Markup Language）文档的标准，即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和 *** 作XML创建的标记（Tag）。DOM与特定的平台、浏览器、语言无关，很多种语言都实现了DOM，比如因为JavaScript和PHP都实现了DOM，所以 JavaScript中有getElementsByTagName()方法，PHP中也有 getElementsByTagName()，getElementsByTagName()方法是DOM规定的访问XML文档的接口。
XML与HTML相似，但两者是有区别。XML和HTML都来自于SGML，它们都含有标记，有着相似的语法，HTML和XML的最大区别在 于：HTML是一个定型的标记语言，用固定的标记来描述和显示数据，比如
<h1>表示首行标题，有固定的尺寸；而XML没有固定的标记，只能通过自定义的标记来描述数据的形式和结构，而不能显示。HTML是将数据 和显示混在一起，而XML则是将数据和显示分开来。那为什么能使用DOM访问和 *** 作HTML文档（即网页）呢？Web语义化的一个发展方向是将HTML逐 渐演变为更有语义、能将数据内容与现实分离的XML，但HTML不可能立即演变为XML，目前推荐使用的是一个过渡产物——XHTML。HTML与 XHTML网页形成的节点树（统称为HTML节点树）在结构上与XML节点树一样，可以看做是一个符合DOM的XML文档，因此可以使用实现了DOM的程 序语言（如JavaScript、PHP等）来访问和 *** 作HTML文档，即访问和 *** 作那些节点。
由于HTML与XML的相似性及差异，JavaScript不仅实现了标准的DOM方法和属性（即由W3C制定的），而且还实现了HTML特有的 DOM方法和属性，前者称为DOM Core，并不专属于JavaScript，后者称为HTML-DOM。不管是DOM Core还是HTML-DOM，我们在使用JavaScript的时候要注意浏览器之间的兼容性，因为不同的浏览器对这两类方法和属性的支持可能不一样。 这里不详谈DOM Core和HTML-DOM，以及跨浏览器兼容性，教材上都有详细描述。但一般推荐使用DOM Core方法和属性，尽管稍显繁杂。
常见的Core DOM方法如下：
1、创建节点
createElement()
createTextNode()
2、复制节点
cloneNode()
3、插入节点
appendChild()
insertBefore()
4、删除节点
removeChild()
5、替换节点
replaceChild()
6、查找和设置节点属性
setAttribute()
getAttribute()
7、查找节点
getElementById()
getElementsByTagName()
hasChildNode()
常见的Core DOM属性如下：
node.childNodes
node.firstChild
node.lastChild
node.nextSibling
node.previousSibling
node.parentNode
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）