HTML 表格添加删除问题

HTML 表格添加删除问题,第1张

楼主的代码写的要注意兼容和规范性。

核心代码:

<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></tr>中的内容删除即可,包括<tr></tr>。例如有以下代码

<table border="0" cellpadding="5" cellspacing="0" class="st">

<tr>

<td colspan="2" class="sa"><b>网站统计信息:</b></td></tr>

<tr><td bgcolor="#FFFFFF" width="100" align="right" class="s1">商品</td>

<td bgcolor="#FFFFFF" class="s1"><%=Conn.Execute("Select count(*) from venshop_hw")(0)%>件</td></tr>

<tr><td bgcolor="#FFFFFF" align="right" class="s0">分类</td>

<td bgcolor="#FFFFFF" class="s0"><%=Conn.Execute("Select count(*) from venshop_sort")(0)%>大类, <%=Conn.Execute("Select count(*) from venshop_nsort")(0)%>小类</td></tr>

<tr><td bgcolor="#FFFFFF" align="right" class="s1">主题</td>

<td bgcolor="#FFFFFF" class="s1"><%=Conn.Execute("Select count(*) from venshop_pinpai")(0)%></td></tr>

<tr><td bgcolor="#FFFFFF" align="right" class="s0">访问量</td>

<td bgcolor="#FFFFFF" class="s0"><script src="../tj_ven.asp?style=text"></script>次</td></tr>

<tr><td bgcolor="#FFFFFF" align="right" class="s1">用户</td>

<td bgcolor="#FFFFFF" class="s1"><%=Conn.Execute("Select count(*) from venshop_user")(0)%>位</td></tr>

<tr><td bgcolor="#FFFFFF" align="right" class="s0">管理员</td>

<td bgcolor="#FFFFFF" class="s0"><%=Conn.Execute("Select count(*) from venshop_admin where admin_class=0")(0)%>总管理员, <%=Conn.Execute("Select count(*) from venshop_admin where admin_class=1")(0)%>产品管理员, <%=Conn.Execute("Select count(*) from venshop_admin where admin_class=2")(0)%>订单管理员</td></tr>

<tr><td bgcolor="#FFFFFF" align="right" class="s1">订单</td>

<td bgcolor="#FFFFFF" class="s1"><%=Conn.Execute("Select count(*) from venshop_sub")(0)%></td></tr>

<tr><td bgcolor="#FFFFFF" align="right" class="s0">新闻</td>

<td bgcolor="#FFFFFF" class="s0"><%=Conn.Execute("Select count(*) from venshop_article")(0)%></td></tr>

</table>

您想要删除访问量这一行,只需要将

<tr><td bgcolor="#FFFFFF" align="right" class="s0">访问量</td>

<td bgcolor="#FFFFFF" class="s0"><script src="../tj_ven.asp?style=text"></script>次</td></tr>

这一段代码删除就可。

//动态添加行与列

function addHtml( )

{

var tab=document.getElementById("viewTabs")//获得表格

var colsNum=tab.rows.item(0).cells.length //表格的列数

var num=document.getElementById("viewTabs").rows.length//表格当前的行数

var rownum=num-1

tab.insertRow(rownum)

for(var i=0i<colsNum-1i++)

{

tab.rows[rownum].insertCell(i)//插入列

tab.rows[rownum].cells[i].innerHTML="dfd"

}

tab.rows[rownum].insertCell(i)

tab.rows[rownum].cells[i].innerHTML="ddddkk"

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11947544.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存