网站开发

asp.net
随笔 - 30, 文章 - 0, 评论 - 9, 引用 - 0
数据加载中……

怎样实现动态添加删除表单中的行

<script LANGUAGE="JAVASCRIPT">
var i= 0;
var a = 0;
function insertRow(){
　var otr=myTable.insertRow(myTable.rows.length);
　var ocell=otr.insertCell(0);
　ocell.innerHTML="<input type=file name='f1'+a+''>"
　var ocell=otr.insertCell(1);
   ocell.innerHTML="<input type=file name='f2'+a+''>"
   var ocell=otr.insertCell(2);
   ocell.innerHTML="<input type=button name='del'+a+'' value=删除 onclick=myTable.deleteRow(event.srcElement.parentElement.parentElement.rowIndex)>"
   i++;
   a++;
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable" border=1 width=600 >
</table>
<input type=button onclick="insertRow()"　 value="插入行">
</BODY>

2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>添加删除行</title>
</head>

<body><script LANGUAGE="JAVASCRIPT">
var j= 1;
var i= 0;
var a = 0;
function insertRow(){
　var otr=myTable.insertRow(myTable.rows.length);
　    var ocell=otr.insertCell(0);                                         
　 ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text  size='12' maxlength='7'name='num"+a+"'>"
　    var ocell=otr.insertCell(1);
   ocell.innerHTML="<select name='adsl"+a+"'><option value='1'>ADSL</option><option value='2'> LAN</option></select>"
      var ocell=otr.insertCell(2);                                         
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'value='"+j+"'>"
      var ocell=otr.insertCell(3);                                         
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'>"
      var ocell=otr.insertCell(4);                                         
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'>"
      var ocell=otr.insertCell(5); 
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'>"     
     var  ocell=otr.insertCell(6);
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=button name='del'+a+'' value=删除 onclick=myTable.deleteRow(event.srcElement.parentElement.parentElement.rowIndex)>"
   j++;
   i++;
   a++;
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable"width="778" border="1" align="center" cellspacing="0" bordercolorlight="#66CC33" bordercolordark="ffffff">
  <tr>
    <td><div align="center">号码</div></td>
    <td nowrap><div align="center">宽度类型</div></td>
    <td nowrap><div align="center">起始时间</div></td>
    <td nowrap><div align="center">优惠时间</div></td>
    <td nowrap><div align="center">优惠金额</div></td>
    <td nowrap><div align="center">备注</div></td>
    <td nowrap><div align="center">删除</div></td>
  </tr>
</table>
<p align="center">
  <input type=button onclick="insertRow()"value="插入行">
</p>

<p>&nbsp;</p>
</BODY>

</body>
</html>

3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>添加删除行</title>
</head>

<body><script LANGUAGE="JAVASCRIPT">
var i= 0;
var a = 0;
function insertRow(){
　var otr=myTable.insertRow(myTable.rows.length);
　    var ocell=otr.insertCell(0);                                         
　 ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text  size='12' maxlength='7'name='num"+a+"'>"
　    var ocell=otr.insertCell(1);
   ocell.innerHTML="<select onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'name='adsl"+a+"'><option value='1'>ADSL</option><option value='2'> LAN</option></select>"
      var ocell=otr.insertCell(2);                                         
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'value='"+a+"'>"
      var ocell=otr.insertCell(3);                                         
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'>"
      var ocell=otr.insertCell(4);                                         
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'>"
      var ocell=otr.insertCell(5); 
   ocell.innerHTML="<input onkeydown='if(event.keyCode==13){event.keyCode=9;return true}'type=text size='20'name='aa"+a+"'>"     
     var  ocell=otr.insertCell(6);
   ocell.innerHTML="<input type=button name='del'+a+'' value=删除 onclick=myTable.deleteRow(event.srcElement.parentElement.parentElement.rowIndex)>"

   i++;
   a++;
}
function deleteRow()
{
   tr=document.getElementById("myTable").rows;
   if(tr.length>1)tr[tr.length-1].removeNode();
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable"width="778" border="1" align="center" cellspacing="0" bordercolorlight="#66CC33" bordercolordark="ffffff">
  <tr>
    <td><div align="center">号码</div></td>
    <td nowrap><div align="center">宽度类型</div></td>
    <td nowrap><div align="center">起始时间</div></td>
    <td nowrap><div align="center">优惠时间</div></td>
    <td nowrap><div align="center">优惠金额</div></td>
    <td nowrap><div align="center">备注</div></td>
    <td nowrap><div align="center">删除</div></td>
  </tr>
</table>
<p align="center">
  <input type=button onclick="insertRow()"value="插入行">
  <input type=button onclick="deleteRow()"value="删除行">
</p>

<p>&nbsp;</p>
</BODY>

</body>
</html>

posted on 2007-01-29 18:58 风雨兼程 阅读(1211) 评论(0)  编辑  收藏 所属分类: Asp.net


只有注册用户登录后才能发表评论。
网站导航: