`

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操作ＨＴＭＬ增加删除ＴＲ／ＴＤ （学前班级别的哈！）

    jquery动态添加删除(tr/td)

    在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...

    js 操作 增加删除Table行

    在网页开发中，JavaScript是...总结来说，JavaScript提供了一种强大的方式来操作HTML表格，允许开发者动态地增加和删除行，从而实现丰富的交互体验。理解并熟练掌握这些基础技巧，对于提升网页应用的用户体验至关重要。

    JS表操作代码实现增加、删除

    在JavaScript（JS）中，对HTML表格进行操作是常见的需求，包括添加新的行或删除现有的行。这在网页动态交互中非常有用，比如用户输入数据的管理或者展示数据的增删改查功能。以下我们将详细讲解如何使用JavaScript来...

    JS动态添加Table的TR，TD实现方法

    除了上述内容，标签中还提到“JS 动态 添加 Table TR TD 方法”，这表明文章着重讨论了使用原生JavaScript（不依赖于任何框架或库）来实现这一功能。在现代Web开发中，虽然诸如jQuery这样的库提供了更简便的方法来...

    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' ...

    jsj table tr td 增删改

    在JavaScript（JS）中，`table`, `tr`, 和 `td` 是HTML表格元素的常用标签，用于构建和操作表格。这些元素在网页设计和数据展示中占据着重要位置。在编程上下文中，我们通常使用JavaScript来动态地增删改表格内容，...

    js操作html表格, 增加，删除

    以上就是使用JavaScript操作HTML表格增加和删除行的基本步骤。在实际项目中，可能还需要结合CSS和jQuery等库进行更复杂的样式和动画效果的处理。记得在实践中不断优化代码，提高用户体验。在提供的"托尔斯泰.html...

    JS动态增加删除行

    在JavaScript中，动态增加和删除行是常见的前端开发任务，特别是在构建数据表格或者表单时。这个简单例子展示了如何利用JavaScript实现这样的功能，为用户提供更加交互式的体验。在这个例子中，我们将探讨如何通过...

    JS动态创建Table,Tr,Td并赋值的具体实现

    本文档重点介绍了JavaScript语言实现动态创建HTML表格（Table）、表格行（Tr）和表格单元格（Td）的具体方法，并对它们进行赋值的过程。以下是根据所提供的文件内容提炼出的知识点： 1. 动态创建和修改表格结构 ...

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

    在JavaScript中，动态控制HTML表格（table）的行（tr）和单元格（td）的增加与删除是一项常见的任务，特别是在交互式应用和数据展示中。以下是对标题和描述中所述知识点的详细解释： 1. **获取表格元素**： 使用`...

    javascript table 增加删除行,巧妙实现

    在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    JS操作表格代码CRUD操作(很完整)

    在JavaScript（JS）中操作HTML表格是Web开发中常见的任务，尤其在实现CRUD（创建、读取、更新、删除）操作时。本教程将深入探讨如何使用纯JS实现这一功能，无需依赖任何外部库，如jQuery或Angular。 首先，我们需要...

    JQuery操作表格.rar

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本教程将深入探讨如何使用jQuery来操作HTML表格，包括添加和删除行等基本操作。 首先，我们需要了解...

    表格的添加，全选，删除

    在这个主题中，我们将深入探讨如何使用JavaScript（JS）来实现HTML表格的添加、全选和删除功能。 一、HTML表格基础 HTML表格由`&lt;table&gt;`元素定义，`&lt;tr&gt;`表示表格行，`&lt;th&gt;`表示表头单元格，`&lt;td&gt;`则表示数据...

    jquery操作表格增加删除

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本文将详细讲解如何使用jQuery来操作表格，实现增删功能。 一、表格的基本结构 HTML表格由`&lt;table&gt;`...

    jquery 动态增加删除表格. 实例

    本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`&lt;table&gt;`元素定义，每一行由`&lt;tr&gt;`元素...

    JQuery操作tr和td内容的方法实例

    本文详细介绍了如何使用jQuery来操作HTML中的表格（table）元素，特别是如何动态地添加或修改表格中的行（tr）和单元格（td）的内容。以下是从标题、描述和提供的内容部分中抽取并详细说明的知识点。 知识点一：...

    table JS 添加行和删除行

    在网页开发中，JavaScript（JS）是一种不可或缺的脚本语言，尤其在处理用户交互时，如动态修改HTML元素。在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示...

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