提问中的问题 |
关于表格事件
接触JavaScript不是很久,不是非常熟悉这语言的规范,看到一个表格控件很好,但是不知道怎么加AddRow的事件.
似乎是表格初始化时从DATA中的多维数组采集数据信息,然后由JavaScript统一刷新.
现在需要在页面上增加个按钮事件,可以达到在表格中插入新增一行的效果.
但不知道 这要怎么在这基础上改.
热心人士帮帮忙哈...挺急用的.谢了咯
这贴不下代码.我贴51上了...谢谢嘎
http://bbs.51js.com/thread-72131-1-1.html
似乎是表格初始化时从DATA中的多维数组采集数据信息,然后由JavaScript统一刷新.
现在需要在页面上增加个按钮事件,可以达到在表格中插入新增一行的效果.
但不知道 这要怎么在这基础上改.
热心人士帮帮忙哈...挺急用的.谢了咯
这贴不下代码.我贴51上了...谢谢嘎
http://bbs.51js.com/thread-72131-1-1.html
提问时间: 2007-9-14 15:35:03
这似乎冷场西....
------------------------------------------------------------------------------------ 饿...增加删除的问题解决了. 但是如何插入到页面的元素中出大问题了 插到网页的任何元素都会IE doucument出错终止程序.只有插在body内不会出错. 找了些资料说是初始化未完成就被自定义转了值. 但是init方法不放在元素内的话那这就没意义了啊. 有谁对底层了解一点的吗? ------------------------------------------------------------------------------------ 如果新手看了这些代码估计就怕怕了 ------------------------------------------------------------------------------------ 初学者做的 大家不要见笑哈 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document </TITLE > <META NAME="Generator" CONTENT="EditPlus" > <META NAME="Author" CONTENT="" > <META NAME="Keywords" CONTENT="" > <META NAME="Description" CONTENT="" > <script language="javascript" > var currenttr=null; function fastupdate(src) { var value=src.innerHTML; src.innerHTML=" <input type= "text " οnkeydοwn= "if (event.keyCode==13){save(this);} " name= "newvalue " value= ""+value+" " οnblur= "save(this) " >"; src.firstChild.select(); src.firstChild.focus(); } function save(src) { var div=src.parentNode; div.innerHTML=src.value; } function add(form) { var username=form.username.value; var password=form.password.value; if (username=="" ¦ ¦ password=="") { alert("请输入完整!"); return; } var table=document.getElementById("mytable"); var rowcount=table.rows.length; table.insertRow(rowcount); table.rows[rowcount].insertCell(0); table.rows[rowcount].setAttribute("align","center"); table.rows[rowcount].cells[0].innerHTML=" <div οnmοuseοver= "changecolor(this) " onDblClick= "fastupdate(this) " >"+username+" </div >"; table.rows[rowcount].insertCell(1); table.rows[rowcount].cells[1].innerHTML=" <div οnmοuseοver= "changecolor(this) " onDblClick= "fastupdate(this) " >"+password+" </div >"; table.rows[rowcount].insertCell(2); table.rows[rowcount].cells[2].innerHTML=" <input type= "button " value= "删除 " οnclick= "del(this) "/ >"; table.rows[rowcount].cells[2].innerHTML+=" <input type= "button " value= "更新 " οnclick= "update(this) "/ >"; form.username.value=""; form.password.value=""; form.username.focus(); } function del(src) { var tr=src.parentNode.parentNode; var tbody=document.getElementById("mytable").firstChild; tbody.removeChild(tr); } function update(src) { var tr=src.parentNode.parentNode; var str=prompt("输入用户名和密码,以逗号分开!"); if (str!=null && str!="" && str!="undefined" && str.indexOf(",") >=0) { var arr=str.split(","); usernametd=tr.firstChild; passwordtd=tr.childNodes[1]; usernametd.innerHTML=" <div οnmοuseοver= "changecolor(this) " onDblClick= "fastupdate(this) " >"+arr[0]+" </div >"; passwordtd.innerHTML=" <div οnmοuseοver= "changecolor(this) " onDblClick= "fastupdate(this) " >"+arr[1]+" </div >"; } } function changecolor(src) { var tr=src.parentNode.parentNode; if (currenttr!=null) { currenttr.style.background="#FFFFFF"; } tr.style.background="#CCCCCC"; currenttr=tr; } </script > </HEAD > <BODY > <form id="myfrom" > 用户名: <input type="text" οnkeydοwn="if (event.keyCode==13) {password.focus();password.select()}" name="username"/ > <br/ > 密码: <input type="password" οnkeydοwn="if (event.keyCode==13) btn.click();" name="password" > <br/ > <input type="button" value="增加" name="btn" οnclick="add(this.form)"/ > </form > <div align="center" > <table border="1" cellpadding="0" cellspacing="0" width="70%" id="mytable" > <tr > <th >用户名 </th > <th >密码 </th > <th >操作 </th > </tr > </table > </div > </BODY > </HTML > ------------------------------------------------------------------------------------ 关注ing ------------------------------------------------------------------------------------ ......冷清啊 ------------------------------------------------------------------------------------ 完整的代码控件三个回贴拼起来. AddRow()是我自己写的,但是完全没有达到按照表格自身模式添加新一行. 希望哪个牛人帮忙看看要怎么改... ------------------------------------------------------------------------------------ dataobj.rows[eprowindex].className = "selectedrow"; nowrow = eprowindex; } } } //更改列宽 t s.rsc_d = function(e,obj){ var px = document.all?e.offsetX:e.layerX-obj.offsetLeft; if(px >obj.offsetWidth-6 && px <obj.offsetWidth){ e=e ¦ ¦window.event; obj=obj ¦ ¦t s; ml = e.clientX; ow = obj.offsetWidth; tdobj = obj; if(obj.setCapture){ obj.setCapture(); }else{ e.preventDefault(); } }else{ if(nowrow!=null){ dataobj.rows[nowrow].className = ""; } if(obj.getAttribute("sort")==null){ obj.setAttribute("sort",0); } var sort = obj.getAttribute("sort"); if(sort==1){ dgsort(obj,true); obj.setAttribute("sort",0); }else{ dgsort(obj,false); obj.setAttribute("sort",1); } obj.className = "sortdown"; } } t s.mouseup = function(obj){ obj.className = "over"; } function rsc_m(e){ if(tdobj!=null){ e=e ¦ ¦window.event; var newwidth = ow-(ml-e.clientX); if(newwidth >5){ tdobj.style.width = newwidth; dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth; }else{ tdobj.style.width = 5; dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5; } dh.setwh(); scrh(); } } function rsc_u(e){ if(tdobj!=null){ e=e ¦ ¦window.event; var newwidth = ow-(ml-e.clientX); if(newwidth >5){ tdobj.style.width = newwidth; dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth; }else{ tdobj.style.width = 5; dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5; } if(tdobj.releaseCapture){ tdobj.releaseCapture(); } ml = 0; ow = 0; tdobj = null; } dh.setwh(); scrh(); } t s.cc = function(e,obj){ var px = document.all?e.offsetX:e.layerX-obj.offsetLeft; if(px >obj.offsetWidth-6 && px <obj.offsetWidth){ obj.style.cursor = "col-resize"; }else{ obj.style.cursor = "default"; } } t s.over = function(obj){ obj.className = "over"; } t s.out = function(obj){ obj.className = "column"; } t s.dataover = function(obj){ if(obj.rowIndex!=nowrow){ obj.className = "dataover"; } } t s.dataout = function(obj){ if(obj.rowIndex!=nowrow){ obj.className = ""; } } //键盘Up & Down事件 function updown(e){ e=e ¦ ¦ window.event; e=e.w ch ¦ ¦ e.keyCode; var rl = dh.data.length; switch(e){ case 38://Up; if(nowrow!=null && nowrow >1){ vbar.scrollTop -= 18; dataobj.rows[nowrow].className = ""; nowrow -= 1; dataobj.rows[nowrow].className = "selectedrow"; }; break; case 40://Down; if(nowrow!=null && nowrow <rl){ vbar.scrollTop += 18; dataobj.rows[nowrow].className = ""; nowrow += 1; dataobj.rows[nowrow].className = "selectedrow"; }; break; default:break; } } function dti(s){ var n = 0; var a = s.match(//d+/g); for(var i=0;i <a.length;i++){ if(a[i].length <2){ a[i] = "0"+a[i]; } } n = a.join(""); return n; } //排序 function dgsort(obj,asc){ var rl = dh.data.length; var ci = obj.cellIndex; var rowsobj = []; for(var i=1;i <dataobj.c ldNodes[0].rows.length;i++){ rowsobj[i-1] = dataobj.c ldNodes[0].rows[i]; } rowsobj.sort(function(trObj1,trObj2){ if(!isNaN(trObj1.cells[ci].innerHTML.charAt(0)) && !isNaN(trObj2.cells[ci].innerHTML.charAt(0))){ if(asc){ return dti(trObj1.cells[ci].innerHTML)-dti(trObj2.cells[ci].innerHTML); }else{ return dti(trObj2.cells[ci].innerHTML)-dti(trObj1.cells[ci].innerHTML); } }else{ if(asc){ return trObj1.cells[ci].innerHTML.localeCompare(trObj2.cells[ci].innerHTML); }else{ return trObj2.cells[ci].innerHTML.localeCompare(trObj1.cells[ci].innerHTML); } } }); for(var i=0;i <rowsobj.length;i++){ dataobj.c ldNodes[0].appendC ld(rowsobj[i]); } for(var c=1;c <obj.parentNode.cells.length-1;c++){ obj.parentNode.cells[c].c ldNodes[1].innerHTML = ""; } if(asc){ obj.c ldNodes[1].innerHTML = "▲"; }else{ obj.c ldNodes[1].innerHTML = "▼"; } } } function AddRow(){ var tab=document.getElementById("datacolumn"); var cb=document.createElement("input"); cb.type="checkbox"; var tr=tab.insertRow(0); var cell=tr.insertCell(0); cell.appendC ld(cb); cb.Parent=tr; tr.CB=cb; } </script > </head > <body style="background:#ECE9D8;" > <form name="form1" method="post" action="" > <button οnclick="AddRow()" >添加行 </button > </form > <script language="javascript" > var dhdg = new dhdatagrid(); dhdg.callname = "dhdg"; dhdg.columns = ["1","2","3"]; dhdg.data = [["000","5555","2006-12-6 17:06"],["22","333","444"]]; dhdg.dblclick_fun = function(e){alert(e+ ",ondblclick ");} dhdg.contextmenu_fun = function(e){alert(e+ ",oncontextmenu ");} dhdg.init(); dhdg.setwh(); </script > </body > </html > ------------------------------------------------------------------------------------ up ------------------------------------------------------------------------------------ //dhdatagrid zero point 零点 var dgzero = " <div id=/"zero/" > </div >" //dhdatagrid slidecolumn 第一列 var dgslide = " <table cellpadding=/"0/" cellspacing=/"0/" id=/"slidecolumn/" >"+dgs+" </table >"; //dhdatagrid column 标题栏 var dgcolumn = " <table cellpadding=/"0/" cellspacing=/"0/" id=/"titlecolumn/" >"+dgc+" </table >"; //dhdatagrid data 数据 var dgdata = " <table cellpadding=/"0/" cellspacing=/"0/" id=/"datacolumn/" >"+dgc+dgd+" </table >"; //dhdatagrid hbar 水平滚动条 var dghbar = document.createElement("DIV"); dghbar.id = "hbar"; dghbar.style.position = "absolute"; dghbar.style.width = "100%"; dghbar.style.height = "17px"; dghbar.style.top = this.height-17; dghbar.style.overflowX = "auto"; dghbar.style.zIndex = "10"; dghbar.onscroll = function(){scrh();} dghbar.innerHTML = " <div style=/"width:100%;height:1px;overflow-y:hidden;/" > </div >"; //dhdatagrid vbar 垂直滚动条 var dgvbar = document.createElement("DIV"); dgvbar.id = "vbar"; dgvbar.style.position = "absolute"; dgvbar.style.width = "17px"; dgvbar.style.height = "100%"; dgvbar.style.left = this.width-17; dgvbar.style.overflowY = "auto"; dgvbar.style.zIndex = "10"; dgvbar.onscroll = function(){scrv();} dgvbar.innerHTML = " <div style=/"width:1px;height:100%;overflow-x:hidden;/" > </div >"; //dhdatagrid bgbar 滚动条背景 var dgbgbar = document.createElement("DIV"); dgbgbar.id = "bgbar"; dgbgbar.style.background = "buttonface"; dgbgbar.style.position = "absolute"; dgbgbar.style.width = "100%"; dgbgbar.style.height = "17px"; dgbgbar.style.top = this.height-17; dgbgbar.style.overflowX = "auto"; dgbgbar.style.zIndex = "9"; dgbgbar.style.display = "none"; dgbgbar.innerHTML = " "; //appendChild dgframe.innerHTML = dgzero+dgslide+dgcolumn+dgdata; dgframe.appendChild(dghbar); dgframe.appendChild(dgvbar); dgframe.appendChild(dgbgbar); this.parentNode.appendChild(dgframe); if(document.attachEvent){ document.attachEvent("onkeydown",updown); }else{ document.addEventListener("keydown",updown,false); } framediv = dgframe; zerobj = document.getElementById("zero"); leftobj = document.getElementById("slidecolumn"); titleobj = document.getElementById("titlecolumn"); dataobj = document.getElementById("datacolumn"); hbar = dghbar; vbar = dgvbar; bgbar = dgbgbar; var btt = getCurrentStyle(framediv,"borderTopWidth"); var btr = getCurrentStyle(framediv,"borderRightWidth"); var btb = getCurrentStyle(framediv,"borderBottomWidth"); var btl = getCurrentStyle(framediv,"borderLeftWidth"); var fh = getCurrentStyle(framediv,"height"); var zh = getCurrentStyle(zerobj,"height"); var zbt = getCurrentStyle(zerobj,"borderTopWidth"); var zbb = getCurrentStyle(zerobj,"borderBottomWidth"); if(document.all){ vbar.style.left = parseInt(vbar.style.left)-parseInt(btr)-parseInt(btl); }else{ framediv.style.height = parseInt(fh)-parseInt(btb)-parseInt(btt); zerobj.style.height = parseInt(zh)-parseInt(zbb)-parseInt(zbt); } hbar.style.top = parseInt(hbar.style.top)-parseInt(btb)-parseInt(btt); bgbar.style.top = parseInt(bgbar.style.top)-parseInt(btb)-parseInt(btt); } function getCurrentStyle(oElement, sProperty) { if(oElement.currentStyle){ return oElement.currentStyle[sProperty]; }else if(window.getComputedStyle){ sProperty = sProperty.replace(/([A-Z])/g, "-$1").toLowerCase(); return window.getComputedStyle(oElement, null).getPropertyValue(sProperty); }else{ return null; } } //设置块滚动条 this.setwh = function(){ hbar.style.display = "block"; vbar.style.display = "block"; hbar.childNodes[0].style.width = dataobj.offsetWidth; vbar.childNodes[0].style.height = dataobj.offsetHeight; if(hbar.childNodes[0].offsetWidth <=hbar.offsetWidth){ hbar.style.display = "none"; }else{ hbar.style.display = "block"; } if(vbar.childNodes[0].offsetHeight <=vbar.offsetHeight){ vbar.style.display = "none"; }else{ vbar.style.display = "block"; } if(hbar.childNodes[0].offsetWidth >hbar.offsetWidth && vbar.childNodes[0].offsetHeight >vbar.offsetHeight && changeposv){ bgbar.style.display = "block"; hbar.style.width = hbar.offsetWidth-17; vbar.style.height = vbar.offsetHeight-17; vbar.childNodes[0].style.height = vbar.childNodes[0].offsetHeight+17; changeposv = false; } if(hbar.childNodes[0].offsetWidth <=hbar.offsetWidth+17 && !changeposv){ bgbar.style.display = "none"; hbar.childNodes[0].style.width = 0; hbar.style.width = hbar.offsetWidth+17; vbar.style.height = vbar.offsetHeight+17; changeposv = true; if(vbar.offsetHeight-dataobj.offsetHeight >dataobj.offsetTop && document.all){ leftobj.style.top = leftobj.offsetTop+17; dataobj.style.top = dataobj.offsetTop+17; } } } //鼠标滚轮,列表滚动事件 function mwEvent(e){ e=e ¦ ¦window.event; if(e.wheelDelta <=0 ¦ ¦ e.detail >0){ vbar.scrollTop += 18; }else { vbar.scrollTop -= 18; } } function ae(obj){ if(document.attachEvent){ obj.attachEvent("onmousewheel",mwEvent); }else{ obj.addEventListener("DOMMouseScroll",mwEvent,false); } } //滚动条事件 function scrv(){ leftobj.style.top = -(vbar.scrollTop); dataobj.style.top = -(vbar.scrollTop); } function scrh(){ titleobj.style.left = -(hbar.scrollLeft); dataobj.style.left = -(hbar.scrollLeft); } //选择行 function getrow(e){ e=e ¦ ¦window.event; var esrcobj = e.srcElement?e.srcElement:e.target; if(esrcobj.parentNode.tagName=="TR"){ var epobj = esrcobj.parentNode; var eprowindex = epobj.rowIndex; if(eprowindex!=0){ if(nowrow!=null){ dataobj.rows[nowrow].className = ""; } ------------------------------------------------------------------------------------ <html > <head > <meta http-equiv="content-type" content="type=text/html; charset=gb2312" > <style type="text/css" > /*dhdatagrid 大块样式*/ #dhdatagrid {position:relative;width:500px;height:200px;background:white;margin:0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;} /*dhdatagrid 表格全局样式*/ #dhdatagrid table {table-layout:fixed;margin:0px;} #dhdatagrid table td {height:18px;cursor:default;font-size:12px;font-family:verdana;overflow:hidden;white-space:nowrap;text-indent:2px;border-right:1px solid buttonface;border-bottom:1px solid buttonface;} #dhdatagrid table td .arrow {font-size:8px;color:#808080;} #dhdatagrid table .lastdata {border-right:none;} #dhdatagrid table .column {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;} #dhdatagrid table .over {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;} #dhdatagrid table .sortdown {width:120px;cursor:default;background:buttonface;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid #404040;border-top:1px solid #404040;position:relative;left:1px;} #dhdatagrid table .dataover {background:#FAFAFA;} #dhdatagrid table .firstcolumn {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;} #dhdatagrid table .lastcolumn {background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;} /*dhdatagrid 选定行样式*/ #dhdatagrid table .selectedrow {background:highlight;color:white;} /*dhdatagrid 表头样式*/ #dhdatagrid #titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index:3;} /*dhdatagrid 左边栏样式*/ #dhdatagrid #slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;} #dhdatagrid #slidecolumn td {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;} /*dhdatagrid 内容表体样式*/ #dhdatagrid #datacolumn {width:100%;position:absolute;top:0px;left:0px;} /*dhdatagrid 原点样式*/ #dhdatagrid #zero {width:30px;height:18px;margin:0px;padding:0px;position:absolute;top:0px;left:0px;z-index:10;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;text-align:center;font-size:10px;color:#A19F92;} </style > <script language="javascript" > function dhdatagrid(){ //author:dh20156; this.callname = "dhdg"; this.width = 500; this.height = 200; this.rid = "dhdatagrid"; this.columns = []; this.data = []; this.dblclick_fun = function(){} this.contextmenu_fun = function(){} this.parentNode = document.body; var dh = this; var framediv = null; var zerobj = null; var leftobj = null; var titleobj = null; var dataobj = null; var hbar = null; var vbar = null; var bgbar = null; //改变列宽初始位置 var ml = 0; //改变列宽对象初始宽度 var ow = 0; //改变列宽对象 var tdobj = null; //当前选定行索引 var nowrow = null; //是否更改垂直滚动条位置 var changeposv = true; this.init = function(){ //init the data 初始数据 var dgc = ""; if(this.columns.length >0){ dgc = " <tr > <td class=/"firstcolumn/" > </td >"; for(var cc=0;cc <this.columns.length;cc++){ dgc += " <td class=/"column/" οnmοuseοver=/""+this.callname+".over(this);/" οnmοuseοut=/""+this.callname+".out(this);/" οnmοusemοve=/""+this.callname+".cc(event,this);/" οnmοusedοwn=/""+this.callname+".rsc_d(event,this);/" οnmοuseup=/""+this.callname+".mouseup(this);/" >"+this.columns[cc]+" <span class=/"arrow/" > </span > </td >"; } dgc += " <td class=/"lastcolumn/" > </td > </tr >"; } var dgs = ""; var dgd = ""; if(this.data.length >0){ //第一列 dgs = " <tr > <td > </td > </tr >"; for(var r=0;r <this.data.length;r++){ dgs += " <tr > <td >"+(r+1)+" </td > </tr >"; dgd += " <tr οnmοuseοver=/""+this.callname+".dataover(this);/" οnmοuseοut=/""+this.callname+".dataout(this);/" > <td class=/"firstcolumn/" > </td >"; for(var c=0;c <this.data[r].length;c++){ dgd += " <td οndblclick=/""+this.callname+".dblclick_fun(this);/" οncοntextmenu=/""+this.callname+".contextmenu_fun(this);/" >"+this.data[r][c]+" </td >"; //alert(this.data[r][c]); } dgd += " <td class=/"lastdata/" > </td > </tr >"; } if(dgc==""){ dgc = " <tr > <td class=/"firstcolumn/" > </td >"; for(var dc=0;dc <this.data[0].length;dc++){ dgc += " <td class=/"column/" οnmοuseοver=/""+this.callname+".over(this);/" οnmοuseοut=/""+this.callname+".out(this);/" οnmοusemοve=/""+this.callname+".cc(event,this);/" οnmοusedοwn=/""+this.callname+".rsc_d(event,this);/" οnmοuseup=/""+this.callname+".mouseup(this);/" >Expr"+(dc+1)+" <span class=/"arrow/" > </span > </td >"; } dgc += " <td class=/"lastcolumn/" > </td > </tr >"; } } //dhdatagrid frame 框架 var dgframe = document.createElement("DIV"); dgframe.id = this.rid; dgframe.onmousedown = function(e){e=e ¦ ¦window.event;getrow(e);} dgframe.onmousemove = function(e){e=e ¦ ¦window.event;rsc_m(e);} if(document.attachEvent){ document.attachEvent("onmouseup",rsc_u); }else{ document.addEventListener("mouseup",rsc_u,false); } dgframe.oncontextmenu = function(){return false} dgframe.onselectstart = function(){return false} ae(dgframe); ------------------------------------------------------------------------------------ = =o 不是单一的添加删除啊...汗...是我贴上面的代理那里增加个添加,删除,修改,的事件啊.晕.谢谢楼上的两位 ------------------------------------------------------------------------------------ <!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/html; charset=gb2312" / > <title >无标题文档 </title > </head > <body > <table width="200" border="1" id="tab" > </table > <button οnclick="AddCheckBoxRow()" >添加行 </button > <button οnclick="Dele()" >删除选中行 </button > </body > <script type="text/javascript" > var tab=document.getElementById("tab"); function AddCheckBoxRow(){ var cb=document.createElement("input"); cb.type="checkbox"; var tr=tab.insertRow(0); var cell=tr.insertCell(0); cell.appendChild(cb); cb.Parent=tr; tr.CB=cb; } function Dele(){ var i=0; while(i <tab.rows.length){ if(tab.rows[i].CB.checked==true){ tab.deleteRow(i); i--; } i++; } } </script > </html > ------------------------------------------------------------------------------------ insertRow ------------------------------------------------------------------------------------ |