DHTML实现表格的增加和删除

最新推荐文章于 2018-07-07 19:45:37 发布

最新推荐文章于 2018-07-07 19:45:37 发布 · 178 阅读

文章标签：

#JavaScript #XML #HTML #ViewUI

程中淘沙专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格动态操作方法，包括添加和删除行。通过检查复选框的状态来确定表格中行的数量，并据此进行增删操作。

xml 代码

<html>
<head>
</head>
<body>
<p>this is a dhtml demo!!!</p>
<form name='testForm'>
<input type='checkbox' name='cb1' value='0' onclick='simpletraversal("cb1",0)'/>
<input type='checkbox' name='cb2' value='1' onclick='simpletraversal("cb2",1)'/>
<input type='checkbox' name='cb3' value='2' onclick='simpletraversal("cb3",2)'/>
<input type='checkbox' name='cb4' value='3' onclick='simpletraversal("cb4",3)'/>
<table id='table1' border='1' width='100%'>
</table>
<input type='button' value='del row' onclick='removerow();'/> ---<input type='button' value='add row' onclick='addrow();'/>
</form>

js 代码

<script language="JavaScript">
//var curr_row;
//var oRow
//oRow = oTable.insertRow();
//var oRow
//oRow = oTable.insertRow(3);
function traversalTable()
{
var tableEle1=document.all.table1;
for (curr_row = 0; curr_row < tableEle1.rows.length; curr_row++)
{
tableEle1.rows[curr_row].style.fontWeight = "bold";
}
}
function addrow(place)
{
var tableEle1=document.all.table1;
currowcount=tableEle1.rows.length;
tableEle1=document.all.table1;
if(place==null)
{
oRow=tableEle1.insertRow();
oCell=oRow.insertCell();
oCell.innerHTML = '' + currowcount + '0';
oCell=oRow.insertCell();
oCell.innerHTML = '' + currowcount + '1';
}
else
{
oRow=tableEle1.insertRow(place);
oCell=oRow.insertCell();
oCell.innerHTML = '' + place + '0';
oCell=oRow.insertCell();
oCell.innerHTML = '' + place + '1';
}
}
function removerow(place)
{
var tableEle1=document.all.table1;
if(tableEle1.rows.length>0)
{
tableEle1=document.all.table1;
if(place==null)
tableEle1.deleteRow();
else
tableEle1.deleteRow(place);
}
else
{
alert('no row to del');
}
}
function newaddrow(place)
{
var tableEle1=document.all.table1;
var currowcount=tableEle1.rows.length;
var insertp=0;
tableEle1=document.all.table1;
if(place==null)
{
oRow=tableEle1.insertRow();
oCell=oRow.insertCell();
oCell.innerHTML = '' + currowcount + '0';
oCell=oRow.insertCell();
oCell.innerHTML = '' + currowcount + '1';
}
else
{
if(currowcount==0)
insertp=0;
else
{
//loop table, and find the place to insert
for (var curr_row = 0; curr_row < tableEle1.rows.length; curr_row++)
{
//alert(tableEle1.rows[curr_row].id);
if(place>tableEle1.rows[curr_row].id)
{
insertp++;
}
else
{
break;
}
}
}
alert(insertp);
oRow=tableEle1.insertRow(insertp);
oCell=oRow.insertCell();
oRow.id=place;
oCell.innerHTML = '' + place + '0';
oCell=oRow.insertCell();
oCell.innerHTML = '' + place + '1';
}
}
function newremoverow(place)
{
var tableEle1=document.all.table1;
var currowcount=tableEle1.rows.length;
var deletep=0;
if(tableEle1.rows.length>0)
{
tableEle1=document.all.table1;
if(place==null)
tableEle1.deleteRow(deletep);
else
{
if(currowcount==0)
deletep=0;
else
{
//loop table, and find the place to insert
for (var curr_row = 0; curr_row < currowcount; curr_row++)
{
//alert(tableEle1.rows[curr_row].id);
if(place>tableEle1.rows[curr_row].id)
{
deletep++;
}
else
{
break;
}
}
}
alert(deletep);
}
tableEle1.deleteRow(deletep);
}
else
{
alert('no row to del');
}
}
function traversal(obj,place)
{
try
{
var selcount=0;
for(var i=0;i<obj.elements.length;i++)
{
if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox")
{
if(obj.elements[i].checked==true)
{
//alert('');
selcount++;
}
}
}
var tableEle2=document.all.table1;
var currrowsum=tableEle2.rows.length;
alert(currrowsum);
if(currrowsum>selcount)
{
for(var loopcount=0;loopcount<currrowsum-selcount;loopcount++)
{
removerow(place);
}
}
else
{
for(var loopcount=0;loopcount<selcount-currrowsum;loopcount++)
{
addrow();
}
}
}
catch (e)
{
}
}
function simpletraversal(obj,place)
{
var chboxObj=document.getElementById(obj);
alert(chboxObj.checked);
if(chboxObj.checked)
{
newaddrow(place);
}
else
{
newremoverow(place);
}
}
</script>