关于表格事件（转）

来源：互联网发布：11月份经济数据编辑：程序博客网时间：2024/05/07 19:36

提问中的问题

关于表格事件

接触JavaScript不是很久,不是非常熟悉这语言的规范,看到一个表格控件很好,但是不知道怎么加AddRow的事件.
似乎是表格初始化时从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 " onkeydown= "if (event.keyCode==13){save(this);} " name= "newvalue " value= ""+value+" " onblur= "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 onmouseover= "changecolor(this) " onDblClick= "fastupdate(this) " >"+username+" </div >";

table.rows[rowcount].insertCell(1);
table.rows[rowcount].cells[1].innerHTML=" <div onmouseover= "changecolor(this) " onDblClick= "fastupdate(this) " >"+password+" </div >";

table.rows[rowcount].insertCell(2);
table.rows[rowcount].cells[2].innerHTML=" <input type= "button " value= "删除 " onclick= "del(this) "/ >";
table.rows[rowcount].cells[2].innerHTML+=" <input type= "button " value= "更新 " onclick= "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 onmouseover= "changecolor(this) " onDblClick= "fastupdate(this) " >"+arr[0]+" </div >";
passwordtd.innerHTML=" <div onmouseover= "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" onkeydown="if (event.keyCode==13) {password.focus();password.select()}" name="username"/ > <br/ >
密码: <input type="password" onkeydown="if (event.keyCode==13) btn.click();" name="password" > <br/ >
<input type="button" value="增加" name="btn" onclick="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 onclick="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/" onmouseover=/""+this.callname+".over(this);/" onmouseout=/""+this.callname+".out(this);/" onmousemove=/""+this.callname+".cc(event,this);/" onmousedown=/""+this.callname+".rsc_d(event,this);/" onmouseup=/""+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 onmouseover=/""+this.callname+".dataover(this);/" onmouseout=/""+this.callname+".dataout(this);/" > <td class=/"firstcolumn/" > </td >";
for(var c=0;c <this.data[r].length;c++){
dgd += " <td ondblclick=/""+this.callname+".dblclick_fun(this);/" oncontextmenu=/""+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/" onmouseover=/""+this.callname+".over(this);/" onmouseout=/""+this.callname+".out(this);/" onmousemove=/""+this.callname+".cc(event,this);/" onmousedown=/""+this.callname+".rsc_d(event,this);/" onmouseup=/""+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 onclick="AddCheckBoxRow()" >添加行 </button >
<button onclick="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
------------------------------------------------------------------------------------