风人园

弱水三千,只取一瓢,便能解渴;佛法无边,奉行一法,便能得益。
随笔 - 99, 文章 - 181, 评论 - 56, 引用 - 0
数据加载中……

JavaScript动态添加删除表格行列(ZT)

JavaScript动态添加删除表格行列

上周因为手头一个东西需要增加不定项目,左思右想没有找到一个好的解决办法。刚好旧友soot过来深圳,他给了我一个办法,用javascript动态添加删除表格行的思路,并演示了一下,符合我的要求,于是拿出来与大家共分享

以下是我测试的代码
<%
 
 If Request("dd")<>"" Then
  Response.write(Ubound(split(request("dd"),",")))
 End If

%>
<html>
<head>
<script>
var i = 0;
function add() {
 i++;
 var tbl = document.all.tbl;
 var tr = tbl.insertRow();
 var td = tr.insertCell();
 td.innerHTML = "<input name='dd' value = 'dd"+i+"'>"
}
</script>
</head>
<body>

<form method=post>
<table id=tbl>
<tr><td><input name="dd" value = "dd0"></td></tr>
</table>

<INPUT TYPE="button" value="add" onclick="add()">
<INPUT TYPE="submit" value="submit">
</form>
</html>

添加之后同时将值存在一个隐藏表单域中,以便提交时使用,使用数组方法接收值。

今日在网上搜索,发现一个网友的博客中也有相关代码,于是帖过来一起参考。


<table id="idTB" border=0><!--注意id,与JS中的要相对应-->
  <tr id=idTR>
    <td>第一行 <input type='button'></td>
  </tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="删除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在该格添加的HTML代码填在这里,因为这里是text,注意不要重名了。
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length>0)
    idFirst.innerText='1';
  return true;
}
function delRow(){//删除表格的一行
  sIndex=idIndex.value;
  if(sIndex=='')
    sIndex=idTB.rows.length-1;
  else
    sIndex=parseInt(sIndex)-1;
   
 idTB.deleteRow(sIndex);
 
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>

posted on 2007-07-10 21:27 风人园 阅读(1065) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航: