javascript动态增删行

zoukankan html css js c++ java

javascript动态增删行

<style>
#css{ margin:3;}/*为了和下面增加的一行表格对齐*/
</style>

<script language="javascript">
function insertRow(isTable){ //添加表格的一行
    sIndex = isTable.rows.length; //计算表格有几行,从0开始
    //alert(sIndex);
    nextRow = isTable.insertRow(sIndex); //'insertRow'插入一行
    sIndex++;
    nextRow.insertCell(0).innerHTML = "<table width='700' cellpadding='0' cellspacing='1' bgcolor='#000000'><tr><td width='16%' height='30' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt1' type='text' id='txt1' size='10' /></span></div></td><td width='27%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt2' type='text' id='Description1' size='10' /></span></div></td><td width='20%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt3' type='text' id='txt3' size='10' /></span></div></td><td width='19%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt4' type='text' id='txt4' size='10' /></span></div></td><td width='17%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt5' type='text' id='txt5' size='10' /></span></div></td></tr></table>"; //'insertCell'插入第一个单元格
}

function delRow(isTable){ //删除表格的一行
     sIndex=isTable.rows.length;
//alert(sIndex);
     sIndex--;
if(sIndex>=0){
       rowTable.deleteRow(sIndex);    //'deleteRow'删除一行
}
}
</script>
<table width='700' cellpadding='0' cellspacing='1' bgcolor='#000000' id='css'><tr><td width='16%' height='30' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt1' type='text' id='txt1' size='10' /></span></div></td><td width='27%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt2' type='text' id='Description1' size='10' /></span></div></td><td width='20%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt3' type='text' id='txt3' size='10' />
</span></div></td><td width='19%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt4' type='text' id='txt4' size='10' />
</span></div></td><td width='17%' bgcolor='#FFFFFF' scope='col'><div align='center'><span style='text-indent:0; float:center; text-align:center'><input name='txt5' type='text' id='txt5' size='10' />
</span></div></td></tr></table>

    <table id="rowTable"></table>

    <table width="700" border="0" cellpadding="0" cellspacing="1">
      <tr>
        <td><div align="right">
          <input type="button" name="button" value="增加一行" onclick="insertRow(rowTable)" />
          <input type="button" name="button" value="删除一行" onclick="delRow(rowTable)" />
        </div></td>
      </tr>
    </table>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Table 对象得方法 </TITLE>
<script language="JavaScript">
var intRowIndex = 0;
function insertRow(tbIndex)
{
var objRow = myTable.insertRow(tbIndex);
var objCel = objRow.insertCell(0);
objCel.innerText = document.myForm.myCell1.value;
var objCel = objRow.insertCell(1);
objCel.innerText = document.myForm.myCell2.value;
objRow.attachEvent("onclick",getIndex);
objRow.style.background = "pink";
}

function deleteRow(tbIndex)
{
myTable.deleteRow(tbIndex);
}
function getIndex()
{
intRowIndex = event.srcElement.parentElement.rowIndex;
pos.innerText = intRowIndex;
}
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY onload="pos.innerText=intRowIndex;">
<h2>Table对象得方法</h2>
<hr>
当前位置：<span id="pos"></span>
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>HTML</td>
<td>Css</td>
</tr>
<tr onclick="getIndex()">
<td>JavaScript</td>
<td>VBScript</td>
</tr>
</table>
<form name="myForm">
第一栏：<input type="text" name="myCell1" value="CGI"><br>
第二栏：<input type="text" name="myCell2" value="ASP"><br>
<input type="button" onclick="insertRow(intRowIndex)" value="插入行">
<input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
<input type="button" onclick="insertRow(myTable.rows.length)" value="添加行" >
</form>
</tr>
</BODY>
</HTML>

intRowIndex是全局变量，记录鼠标选择得行。insertRow()函数可以在传入得参数前插入一个表格行

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态给表格增加/删除一行</title>
</head>
<script language=javascript>
allCount=1
function addline()
{
newRow=listtable.insertRow(listtable.rows.length);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
}
function insertline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
if(listtable.rows[i].cells[9].id==lineid.id)
{
newRow=listtable.insertRow(i);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
return;
}
}
}
function delline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
for(j=0;j<listtable.rows[i].cells.length;j++)
{
if(listtable.rows[i].cells[j].id==lineid.id)
{
listtable.deleteRow(i);
return;
}
}
}
}
</script>

<body>
<table width=700 height="20" border="0" align="center" cellpadding=0 cellspacing=0 id=listtable>
<tr align=center height=20>
<td bgcolor=#FFFFFF><b>品名</b></td>
<td bgcolor=#FFFFFF><b>材质</b></td>
<td bgcolor=#FFFFFF><b>规格</b></td>
<td bgcolor=#FFFFFF><b>价格</b></td>
<td bgcolor=#FFFFFF><b>数量</b></td>
<td bgcolor=#FFFFFF><b>产地</b></td>
<td bgcolor=#FFFFFF><b>交货地</b></td>
<td bgcolor=#FFFFFF><b>备注</b></td>
<td bgcolor=#FFFFFF><b>发布</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
</tr>
</table>
<table width="700" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center"><input type=button value=增加一行 onclick=addline()></td>
</tr>
</table>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
     <title>在表格中动态添加删除一行</title>
<script language="javascript" type="text/javascript">
   var flag = 0;
   function addline(f){//添加一行
    var alltbDetailUsed= document.all("tbo").rows;
    //document.all.tbDetailPrepare.rows[0].cells[1].innerText=alltbDetailUsed.length;
    var theFirstSelectedDetail;
    if (f==null)
    {
      theFirstSelectedDetail=alltbDetailUsed.length-2;
    }
    else
     theFirstSelectedDetail=f;
    var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
    var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
    var tab_len = alltbDetailUsed.length-1;
    temp = tab_len;
    document.all("tbo").insertBefore(newRow);
   }
   function deleteline(){//删除一行
    var alltbDetailUsed= document.all("tbo").rows;
    var tab1Length= document.all("tbl_Data3").rows.length;
    var flag1=0;
    for(var i=0;i<document.all("ch1").length;i++)
    {
    if (document.all("ch1")[i].checked==true)
     flag1++;
    }
    if(flag!=0){
     flag += flag1;
    }else{
     flag = flag1;
    }
    if (flag1==0){
       alert("请选择要删除的行!");
     }
     else{
         if (confirm("是否确认删除所选行!")==false) return false;
         for(var i=1;i<alltbDetailUsed.length;i++)
          {
       if (alltbDetailUsed[i].all("ch1").checked==true)
              {
        document.all("tbo").deleteRow(i);
        i=i-1;
              }

          }
        }
       if(document.all("ch1").length<2){
       addline();
      }
   }
   </script>
   </head>
   <body>
    <form name="form1">
<table width="100%"   border="0"   cellpadding="0" cellspacing="0">
    <tr>
      <td>
    <div id="hidd" style="display:block">

     <table width="100%" border="0" id="tbl_Data3" class="list_item"   cellpadding="0" cellspacing="0">
      <tbody id="tbo">

      </tbody>
     </table>
    </div>
   </td>
      </tr>
    <tr><td align="right">
      <input name="add" type="button" value="添加" onClick="addline();">
    <input name="del" type="button" value="删除" onClick="deleteline();">
     </td>
    </tr>
</table>


<table width="100%" border="1" style="display:none" id="tbDetailPrepare" cellpadding="0" cellspacing="0">
   <tr>
    <td colspan="2">
      <table width="100%" border="0">
     <tr>
      <td align="center" style="10"><input type="checkbox" name="ch1"></td>
      <td style="70">专家姓名</td>
      <td align="left"><input name="professional" value="" size="45"></td>
     </tr>
              </table>
           </td>
   </tr>
</table>
</form>
   </body>
</html>

查看全文

相关阅读:
PowerDesigner学习 ---- 系列文章
 PowerDesigner基础使用 ---- 入门学习
 PowerDesigner ---- 数据库设计（概念模型CDM和物理模型PDM）
PowerDesigner V16.5 安装及汉化
 在树莓派是安装并配置NTP服务
 RESTful Web API 理解
 Linux或树莓派3——挂载U盘、移动硬盘并设置rwx权限
 开启树莓派自带的VNC功能
 c#代码获取web.config配置文件里面设置的 <compilation debug="true"节点
 WebService的web客户端同步、异步、多线程向服务端传入参数的数据交互方式

原文地址：https://www.cnblogs.com/zzxap/p/2175972.html