动态添加删除表格

技术文章

动态添加删除表格

时间：2009-03-30 点击：1202

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态添加删除表格</title>
<style>
*{font-size:12px;}
td{height:20px;}
.td1{width:55px}
.td2{width:80px}
.td3{width:60px}
.td4{width:135px;CURSOR: pointer}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" id="table2" >
    <tr>
        <td class=td1 width="54">试题</td>
        <td class=td2 width="75">选项类型</td>
        <td class=td3 width="67">分值</td>
        <td class=td4 title="双击显示增删按钮">选项(双击显示增删按钮)</td>
    </tr>
</table>

<div id=menuCon style="position:absolute;display:none">
<input type=button value="增加"><input type=button value="删除">
</div>
<script language="javascript">
<!--
var objTAB
var maxTR=4;//“小行”（分值／选项）行数
onload=function(){
    objTAB=document.getElementById("table2")
    objTAB.ondblclick=function(){setMenu(event)}
}
function setMenu(e){
    var eTd=$$(e,"td")//点击的TD对象
    var eTr=$$(e,"tr")//点击的TR对象
    if(eTd.cellIndex>=eTr.cells.length-1 &&eTr.rowIndex==0 &&objTAB.rows.length<2){showMenu(eTr);hidDelBt();}//for 表格头行
    else if (eTd.cellIndex>=eTr.cells.length-1 && eTr.rowIndex==objTAB.rows.length-1){showMenu(eTr);showDelBt()}//for 表格体行
}

function showMenu(eTr){
    with($("menuCon")){
        getElementsByTagName("input")[0].onclick=function(){ (eTr.rowIndex*1%maxTR==0)?addRows(eTr,true):addRows(eTr,false)}//“大行”：“小行”
        getElementsByTagName("input")[1].onclick=function(){ delRows(eTr)}
        var p=getPosition(eTr)
        style.top=p[1]+"px"
        style.left=p[0]+p[3]+"px"
        style.display=""
        getElementsByTagName("input")[0].focus()
    }
    document.onclick=function (){setMent()}//页面点击事件（关闭菜单）
}

function delRows(esrc){
    if (esrc.id)allTr--
    objTAB.deleteRow(esrc.rowIndex)
}

function hidDelBt(){//隐藏“删除”按钮 for 表格头行
    $("menuCon").getElementsByTagName("input")[1].style.display="none"
}

function showDelBt(){//显示“删除”按钮 for 表格体行 
    $("menuCon").getElementsByTagName("input")[1].style.display=""
}

function setMent(){//菜单容器外点击关闭菜单
    var esrc=$$(event)
    if (esrc!=$("menuCon"))delMenu()
}

function delMenu(){//删除菜单
    with($("menuCon")){
        getElementsByTagName("input")[0].onclick=null
        getElementsByTagName("input")[1].onclick=null
        style.display="none"
    }
    document.onclick=null
}

function $$(e,c){//返回事件的源对象
    var event = window.event || e;
    var esrc = event.srcElement || event.target;
    if (c)//如果有参数C,返回事件的源对象的C父级对象
        while(esrc.tagName.toLowerCase()!=c)esrc=esrc.parentNode
    return esrc
}

function $(id){return document.getElementById(id)}//获取指定对象

function getPosition(theElement){//获取坐标
    var positionX =0;
    var positionY =0;
    var positionH=theElement.offsetHeight
    var positionW=theElement.offsetWidth
    while (theElement !=null){
        positionX +=theElement.offsetLeft;
        positionY +=theElement.offsetTop;
        theElement =theElement.offsetParent;
    }
    return [positionX,positionY,positionH,positionW];
}

//-->

</script>

</body>

</html>

repeater嵌套

repeater控件序号,自动编号

repeater分页和自动编号

repeater编辑更新删除

iframe综合应用

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：