js实现多个表格自动增删
2007-06-25 13:11
405 查看
以下是相关代码，把下面文件放在同一目录下运行即可：
//
文件 addDelTable.html 代码如下
<!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>
<SCRIPT LANGUAGE="javascript" SRC="addDelTable.js"></SCRIPT>
<SCRIPT>
allCount=1;
countA=1;
countB=1;
countC=1;
countD=1;
</SCRIPT>
<body>
<form method=post name=ecform>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="form_table">
<tr>
<td colspan="5" width="100%"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="form_table">
<TR>
<TH width="17%"> </TH>
<TH width="21%" class="form_label">姓名</TH>
<TH width="25%" class="form_label">职务</TH>
<TH width="32%">单位</TH>
<TH width="5%"></TH>
</TR>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="commandTable">
<tr id=cT>
<TD class="form_label" width="18%"><strong> 指挥人</strong></TD>
<TD class=form_content width="20%"><input type="text" id="cMa" class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id="cMb" class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text"id="cMc" class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('commandTable')"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="technicianTable">
<tr id=tT>
<TD class="form_label" width="18%"><strong> 勘验人</strong></TD>
<TD class=form_content width="20%"><input type="text" id=tMa class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id=tMb class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text" id=tMc class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('technicianTable')"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="protectorTable">
<tr id=pT>
<TD class="form_label" width="18%"><strong> 保护人</strong></TD>
<TD class=form_content width="20%"><input type="text" id=pMa class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id=pMb class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text" id=pMc class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('protectorTable')"></td>
</tr>
</table></td>
</tr>
<TR>
<TH> </TH>
<TH>姓名</TH>
<TH>单位</TH>
<TH>住址</TH>
<TH></TH>
</TR>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="witnessTable">
<tr id=wT>
<TD class="form_label" width="18%"><strong> 见证人</strong></TD>
<TD class=form_content width="20%"><input type="text" id=wMa class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id=wMb class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text" id=wMc class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('witnessTable')"></td>
</tr>
</table></td>
</tr>
</TABLE></td>
</tr>
</table>
</form>
</body>
</html>
//
文件 addDelTable.js 代码如下
var modified=0
var currentLine=-1
var line=-1
function delIt(tableID) {
var PLList=document.getElementById(tableID);
line=parseInt(event.srcElement.ln,10)
if(tableID=="commandTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (cT[i].ln==line){
if (( document.ecform.cMa[i].value.length>0 )|( document.ecform.cMb[i].value.length>0 )|( document.ecform.cMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
if(tableID=="technicianTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (tT[i].ln==line){
if ( ( document.ecform.tMa[i].value.length>0 )|( document.ecform.tMb[i].value.length>0 )|( document.ecform.tMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
if(tableID=="protectorTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (pT[i].ln==line){
if (( document.ecform.pMa[i].value.length>0 )|( document.ecform.pMb[i].value.length>0 )|( document.ecform.pMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
if(tableID=="witnessTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (wT[i].ln==line){
if (( document.ecform.wMa[i].value.length>0 )|( document.ecform.wMb[i].value.length>0 )|( document.ecform.wMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
}
function newHospitalVisit(tableID)
{
var PLList=document.getElementById(tableID);
newRow=PLList.insertRow(PLList.rows.length);
var medicationA="";
var medicationB="";
var medicationC="";
if(tableID=="commandTable"){
newRow.id="cT";
medicationA="cMa";
medicationB="cMb";
medicationC="cMc";
allCount=countA;
countA++;
}
if(tableID=="technicianTable"){
newRow.id="tT";
medicationA="tMa";
medicationB="tMb";
medicationC="tMc";
allCount=countB;
countB++;
}
if(tableID=="protectorTable"){
newRow.id="pT";
medicationA="pMa";
medicationB="pMb";
medicationC="pMc";
allCount=countC;
countC++;
}
if(tableID=="witnessTable"){
newRow.id="wT";
medicationA="wMa";
medicationB="wMb";
medicationC="wMc";
allCount=countD;
countD++;
}
//alert(newRow.id);
//newRow.id="tdt";
newRow.ln=allCount;
newRow.bgColor="";
newRow.className="form_content";
//newRow.onclick=lightOn;
c1=newRow.insertCell(0);
c1.ln=allCount;
c1.className="form_label";
//c1.onclick=delIt();
//c1.onmouseover=mouseOver;
//c1.onmouseout=mouseOut;
c1.innerHTML="";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.className="form_content";
c2.innerHTML="<input type=text class=longfield id="+medicationA+" ln="+allCount+" class=tableData onkeyup='modifiedIt()'>" ;
c3=newRow.insertCell(2);
c3.ln=allCount;
c3.className="form_content";
c3.innerHTML="<input type=text class=longfield id="+medicationB+" ln="+allCount+" class=tableData onkeyup='modifiedIt()'>" ;
c4=newRow.insertCell(3);
c4.ln=allCount;
c4.className="form_content";
c4.innerHTML="<input type=text class=longfield id="+medicationC+" ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
c5=newRow.insertCell(4);
c5.ln=allCount;
c5.className="form_label";
c5.id="delItem";
c5.innerHTML="<img src=../../../images/icon/16x16/less.gif alt=del width=18 height=18 ln="+allCount+" onClick=delIt('"+tableID+"')>" ;
allCount++
}
function mouseOver()
{
event.srcElement.className="delMouseOver"
}
function mouseOut()
{
event.srcElement.className="scheduleButtonVisible"
}
如发现有问题请与本人联系：
MSN：hiyu2218@hotmail.com
QQ：147204701
Email：hiyu2218@yahoo.com.cn
//
文件 addDelTable.html 代码如下
<!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>
<SCRIPT LANGUAGE="javascript" SRC="addDelTable.js"></SCRIPT>
<SCRIPT>
allCount=1;
countA=1;
countB=1;
countC=1;
countD=1;
</SCRIPT>
<body>
<form method=post name=ecform>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="form_table">
<tr>
<td colspan="5" width="100%"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="form_table">
<TR>
<TH width="17%"> </TH>
<TH width="21%" class="form_label">姓名</TH>
<TH width="25%" class="form_label">职务</TH>
<TH width="32%">单位</TH>
<TH width="5%"></TH>
</TR>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="commandTable">
<tr id=cT>
<TD class="form_label" width="18%"><strong> 指挥人</strong></TD>
<TD class=form_content width="20%"><input type="text" id="cMa" class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id="cMb" class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text"id="cMc" class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('commandTable')"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="technicianTable">
<tr id=tT>
<TD class="form_label" width="18%"><strong> 勘验人</strong></TD>
<TD class=form_content width="20%"><input type="text" id=tMa class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id=tMb class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text" id=tMc class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('technicianTable')"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="protectorTable">
<tr id=pT>
<TD class="form_label" width="18%"><strong> 保护人</strong></TD>
<TD class=form_content width="20%"><input type="text" id=pMa class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id=pMb class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text" id=pMc class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('protectorTable')"></td>
</tr>
</table></td>
</tr>
<TR>
<TH> </TH>
<TH>姓名</TH>
<TH>单位</TH>
<TH>住址</TH>
<TH></TH>
</TR>
<tr>
<td colspan="5"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="witnessTable">
<tr id=wT>
<TD class="form_label" width="18%"><strong> 见证人</strong></TD>
<TD class=form_content width="20%"><input type="text" id=wMa class="longfield" name="loginName" /> </TD>
<TD class=form_content width="25%"><input type="text" id=wMb class="longfield" name="loginName" /> </TD>
<TD class=form_content width="35%"><input type="text" id=wMc class="longfield" name="loginName" /></TD>
<td class="form_label" width="5%"><img src="../../../images/icon/16x16/more.gif" alt="add" width="18" height="18" onClick="newHospitalVisit('witnessTable')"></td>
</tr>
</table></td>
</tr>
</TABLE></td>
</tr>
</table>
</form>
</body>
</html>
//
文件 addDelTable.js 代码如下
var modified=0
var currentLine=-1
var line=-1
function delIt(tableID) {
var PLList=document.getElementById(tableID);
line=parseInt(event.srcElement.ln,10)
if(tableID=="commandTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (cT[i].ln==line){
if (( document.ecform.cMa[i].value.length>0 )|( document.ecform.cMb[i].value.length>0 )|( document.ecform.cMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
if(tableID=="technicianTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (tT[i].ln==line){
if ( ( document.ecform.tMa[i].value.length>0 )|( document.ecform.tMb[i].value.length>0 )|( document.ecform.tMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
if(tableID=="protectorTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (pT[i].ln==line){
if (( document.ecform.pMa[i].value.length>0 )|( document.ecform.pMb[i].value.length>0 )|( document.ecform.pMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
if(tableID=="witnessTable"){
if (line>0){
for (i=1;i<PLList.rows.length;i++){
if (wT[i].ln==line){
if (( document.ecform.wMa[i].value.length>0 )|( document.ecform.wMb[i].value.length>0 )|( document.ecform.wMc[i].value.length>0 )){
if (!confirm("Are you sure you want to delete this record?")){
return
}
}
PLList.deleteRow(i)
}
}
}
}
}
function newHospitalVisit(tableID)
{
var PLList=document.getElementById(tableID);
newRow=PLList.insertRow(PLList.rows.length);
var medicationA="";
var medicationB="";
var medicationC="";
if(tableID=="commandTable"){
newRow.id="cT";
medicationA="cMa";
medicationB="cMb";
medicationC="cMc";
allCount=countA;
countA++;
}
if(tableID=="technicianTable"){
newRow.id="tT";
medicationA="tMa";
medicationB="tMb";
medicationC="tMc";
allCount=countB;
countB++;
}
if(tableID=="protectorTable"){
newRow.id="pT";
medicationA="pMa";
medicationB="pMb";
medicationC="pMc";
allCount=countC;
countC++;
}
if(tableID=="witnessTable"){
newRow.id="wT";
medicationA="wMa";
medicationB="wMb";
medicationC="wMc";
allCount=countD;
countD++;
}
//alert(newRow.id);
//newRow.id="tdt";
newRow.ln=allCount;
newRow.bgColor="";
newRow.className="form_content";
//newRow.onclick=lightOn;
c1=newRow.insertCell(0);
c1.ln=allCount;
c1.className="form_label";
//c1.onclick=delIt();
//c1.onmouseover=mouseOver;
//c1.onmouseout=mouseOut;
c1.innerHTML="";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.className="form_content";
c2.innerHTML="<input type=text class=longfield id="+medicationA+" ln="+allCount+" class=tableData onkeyup='modifiedIt()'>" ;
c3=newRow.insertCell(2);
c3.ln=allCount;
c3.className="form_content";
c3.innerHTML="<input type=text class=longfield id="+medicationB+" ln="+allCount+" class=tableData onkeyup='modifiedIt()'>" ;
c4=newRow.insertCell(3);
c4.ln=allCount;
c4.className="form_content";
c4.innerHTML="<input type=text class=longfield id="+medicationC+" ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
c5=newRow.insertCell(4);
c5.ln=allCount;
c5.className="form_label";
c5.id="delItem";
c5.innerHTML="<img src=../../../images/icon/16x16/less.gif alt=del width=18 height=18 ln="+allCount+" onClick=delIt('"+tableID+"')>" ;
allCount++
}
function mouseOver()
{
event.srcElement.className="delMouseOver"
}
function mouseOut()
{
event.srcElement.className="scheduleButtonVisible"
}
如发现有问题请与本人联系：
MSN：hiyu2218@hotmail.com
QQ：147204701
Email：hiyu2218@yahoo.com.cn
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现表格的增删改查
- 用js实现的一个根据内容自动生成表格的函数
- js实现表格的增删改查
- JS实现点击表头表格自动排序（含数字、字符串、日期）
- js实现表格的增删改查
- js实现自动生成表格
- JS实现表格自动隔行换色
- 纯原生js实现table表格的增删
- JS封装的自动创建表格的实现代码
- JS实现网页表格自动变大缩小的方法
- js 动态表格 可以实现增删改查数据
- JS实现网页表格自动变大缩小的方法
- js实现自动生成表格
- html+js实现表格增删
- vue.js+Element实现表格里的增删改查
- JS实现点击表头表格自动排序（含数字、字符串、日期）
- 用js实现的一个根据内容自动生成表格的函数
- 实现类似EXTJS表格插件 Flexgrid.js GridView中使用的记录
- JS实现div自动滚动
- JS实现-DIV自动居中代码