另一个为javascript中的table中添加控件的方法

转载 于 2007-11-26 21:29:00 发布 · 1.4k 阅读 · 0
文章标签：

#javascript #table #input #delete #insert #button

本文介绍了一种使用JavaScript动态地向HTML表格中添加行和单元格的方法，并演示了如何通过按钮触发来实现添加和删除行的功能。
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>Add&DeleteNodetitle>
  5. <script language="javascript">
  6. var i=1;
  7. function insertStr() {
  8.         i++;
  9.         var td = document.createElement("td"); 
  10.         var tr = document.createElement("tr"); 
  11.         var tbody = document.createElement("tbody"); 
  12.         tr.appendChild(td); 
  13.         tbody.appendChild(tr); 
  14.         var parNode = document.getElementById("table1"); 
  15.         parNode.appendChild(tbody); 
  16.         tr.setAttribute("name","tr"+i);
  17.         tr.setAttribute("id","tr"+i);
  18.         td.innerHTML="<input type='text' name='Tag"+i+"' id='Tag"+i+"' value='Tag"+i+"'><input type='button' value='Delete'  name='Delete"+i+"' id='Delete"+i+"' onClick='javascript:DeleteNode("+i+")'>";
  19.         document.form1.total.value=i;
  20. }
  21. function DeleteNode(j)
  22. {
  23.  var trnode=document.getElementById("tr"+j);
  24.  trnode.parentNode.removeChild(trnode);
  25. }
  26. script>
  27. head>
  28. <body>
  29. <form name="form1" method="post" action="">
  30.     <input name="tag1" type="text" id="tag1" value="Tag1">
  31.     <input name="insert" type="button" id="insert" value="Add a Tag" onClick="insertStr()">
  32.     <input type="hidden" name="total" id="total">
  33. form>
  34. <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
  35. table>
  36. body>
  37. html>

 代码中红色的部分就是可以在table的元素中添加控件的方法 ~ 注意联系牢牢掌握哦~

因为用了元素的innerHTML的属性，所以可以在后面之间添加控件

点击这里查看效果

IMAGSE
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值