`

js操作html增加删除tr/td

HTMLJavaScriptASP.netOracleASP 
阅读更多
总结：可以通过parentElement定位父级元素，有待验证 
<html>
 <head>
  <title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
  <script language="javascript">
  
   //add a new row to the table
   function addRow()
   {
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();
    
    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
    
    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>";   
   }
   
   //deletes the specified row from the table
   function removeRow(src)
   {
    /* src refers to the input button that was clicked. 
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case case <tr>)
    */   
    var oRow = src.parentElement.parentElement;  
    
    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("tblGrid").deleteRow(oRow.rowIndex);  
   }
  
  </script>
 </head>
 <body>
  Demo of a simple table grid that allows adding and deleting rows using DHTML 
  and Javascript 
  <p/>
  Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row.
  <p/>
  <p/>Browser compatility - this sample has been tested to work with IE5.0 and above.
  <p/>
  <hr>
  <!-- sample table grid with 3 columns and 4 rows that are presented by default -->
  <table id="tblGrid" style="table-layout:fixed">
   <tr>
    <td width="150px">Field1</td>
    <td width="150px">Field2</td>
    <td width="250px">Field3</td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type=&quot;text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
  </table>
  <hr>
  <input type="button" value="Add Row" onclick="addRow();" />
  <hr>
  <a href='http://www.interviewboard.com'>Interviewboard - Interview Questions and Answers on ASP.NET, C#, SQL, Oracle and more....</a>
 </body>
</html>

文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/200897/139878.html)
分享到：
| 判断页面属于哪个iframe
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS操作table的tr/td

    js操作ＨＴＭＬ增加删除ＴＲ／ＴＤ （学前班级别的哈！）

    JSP+Struts+JSTL+EL新闻发布系统jsp

    &lt;td width="594" height="16" valign="top" background="/images/index_13.jpg"&gt;&lt;script language='JavaScript' type='text/JavaScript' src='/Article/js/menu.js'&gt;&lt;/script&gt; &lt;script type='text/javascript' ...

    js动态控制table的tr、td增加及删除的具体实现

    html： 代码如下: ’wifi_clients_table’ xss=removed class=”table&gt; &lt;thead&gt; &lt;tr class=”success”&gt; 序号&lt;/th&gt; 机器名&lt;/th&gt; &lt;th&gt;IP地址&lt;/th&gt; &lt;th&gt;MAC地址&lt;/th&gt; 上行/下行速率&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/...

    html个人网站xp界面

    &lt;td width="15%" align="left"&gt;&lt;img src="img/msg.jpg" width="100" height="25" onclick="javascript:window.location.href='msg.asp'" style="cursor:hand" /&gt;&lt;/td&gt; &lt;td width="85%" align="center" ...

    js实现 html 鼠标右键 菜单

    " align="center" onclick="parent.del()"&gt; 删除&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;!-- 右键菜单结束--&gt; &lt;/html&gt; &lt;script language="JavaScript"&gt; function showMenu(id){ menuForm.id.value = id; if("" == id){ ...

    手机信息的增删改查，分页查询

    手机信息的增删改查，分页查询。 *" pageEncoding="gbk"%&gt; *"%&gt; *"%&gt; *"%&gt; ...&lt;script type="text/javascript"&gt; &lt;!-- function delok() { return confirm("确定要删除吗?"); } //--&gt; &lt;/script&gt;

    搜索引擎名次查询.net版源码下载

    -- 表单搜索引擎种类选择，如果你不想出现这么多可以删除你不想出现的即可 --&gt; &lt;/td&gt; &lt;/tr&gt; ("id") &lt;&gt; "" then str = split(Request.Form("id"),",") ...

    JS实现动态表格的添加，修改，删除功能(推荐)

    &lt;td&gt;新增参数:&lt;/td&gt; &lt;td class=pn-fcontent&gt;&lt;input type=button value=选择 onclick=openAppParamsPage();/&gt;&lt;/td&gt; &lt;td&gt;参数列表:&lt;/td&gt; &lt;td class=pn-fcontent&gt;&lt;input type=hidden id=paramslist name=...

    用JSP和数据库做的购物车的源程序

    ＜td width="17%" height="8" align="left"＞删除＜/td＞ ＜/tr＞ sql="select shop_product.product_id,shop_product.product_name, shop_product.product_price,shop_product.product_discount, shop_cart.cart_...

    jsp新闻发布系统

    &lt;script language="JavaScript" type="text/JavaScript"&gt; &lt;!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt...

    浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt

    &lt;!-- public topnav --&gt; &lt;script src="http://csdnimg.cn/pubnav/js/pub_topnav_2011.js"type="text/javascript"&gt;&lt;/script&gt; ...&lt;script language='JavaScript' type='text/javascript' src='/js/jquery...

    简单的一个学生管理系统 servlet+JSP

    &lt;script type="text/javascript" src="/soft08/js/queryStudent.js"&gt;&lt;/script&gt; &lt;/head&gt; 学生信息查询 &lt;/h1&gt; &lt;form action="/soft08/StudentSer" method="post"&gt; 学生姓名 ...

    ddl语言自定义数据库字段

    align="center"&gt;字段名称&lt;/td&gt; &lt;td width="35%" align="center"&gt;字段意义&lt;/td&gt; &lt;td width="10%" align="center"&gt;操作&lt;/td&gt; &lt;/tr&gt; &lt;%&lt;br&gt; do while not oRs.eof and not oRs.bof ...

    fso浏览54646465465464564

    &lt;tr&gt;&lt;td height="25"&gt;文件名： &lt;% =Fname %&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;;height:100%;"&gt;&lt;% =Server.HtmlEncode(FileStr) %&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr height="25"&gt;&lt;td align="center"&gt; 保存" class="b"&gt; 重置" onclick=...

    dwr验证框架多级联下拉菜单

    &lt;td width="32%" height="27" bgcolor="#809EA4"&gt; 省级名称：&lt;/div&gt; &lt;/td&gt; &lt;td width="68%"&gt; sql = "select* from tb_area where TypeID=2 and father=" + SelectID_P + ""; sql_T = "select* from tb_area ...

    购物车商品累加结算效果.zip

    操作&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr v-for="(tabledatas,index) in shopTableDatas"&gt; &lt;td class="selectLeft"&gt; (tabledatas)" v-model="tabledatas.checked"&gt;&lt;/el-checkbox&gt; &lt;/template&gt; &lt;img /&gt; &lt;/span&gt; ...

    JS/jQuery实现超简单的Table表格添加,删除行功能示例

    本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能。分享给大家供大家参考，具体如下： 最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的...

    javascript实现动态增加删除表格行(兼容IE/FF)

    DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;动态增删表格行&lt;/title&gt; [removed] &lt;!– //...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

Magicbox
Global site tag (gtag.js) - Google Analytics