`
tianke66
  • 浏览: 188030 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

动态增加表格

阅读更多

<html>
 <head>
  <title></title>
  <script language="javascript">
   function addRow()
   {
    var newRow = document.all("tblGrid").insertRow();

    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);'/>";  
   }
  
   function removeRow(src)
   {
    var oRow = src.parentElement.parentElement; 
    document.all("tblGrid").deleteRow(oRow.rowIndex); 
   }
 
  </script>
 </head>
 <body>
  <hr>
  <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();" />
 </body>
</html>

分享到:
评论

相关推荐

    在word中动态增加表格并写入数据

    4. **添加表格行方法**: ```csharp public void AddRow0(int n, int num, WriteToWord.Result parameter[] rp) { object miss = System.Reflection.Missing.Value; Word.Table table = wordDoc.Content.Tables...

    android动态添加表格行_动态布局.zip

    在Android开发中,动态添加表格行是一个常见的需求,特别是在创建数据列表或者展示可变数据时。这个主题主要涉及Android的布局管理和控件操作。本文将深入探讨如何在Android应用中实现这一功能,主要包括以下几个...

    android动态添加表格行

    在Android开发中,动态添加表格行是一个常见的需求,特别是在创建数据展示或者用户输入表单时。这个场景通常涉及到`TableLayout`布局,它是Android提供的一个用于构建网格样式的视图容器。下面我们将深入探讨如何在...

    JQuery_可拖曳动态添加表格、动态排序

    JQuery 可拖曳动态添加表格、动态排序 JQuery 是一个流行的 JavaScript 库,提供了丰富的功能来简化 Web 开发。今天,我们将探讨如何使用 JQuery 实现可拖曳动态添加表格、动态排序的功能。 可拖曳动 可拖曳动是 ...

    动态添加表格并有表格的边框效果

    在IT领域,尤其是在Web开发和移动应用开发中,动态添加表格是一种常见的需求,它允许用户在运行时根据需要创建和修改表格结构。本知识点主要关注如何实现“动态添加表格并有表格的边框效果”,这通常涉及到编程语言...

    js动态添加表格

    javascript实现动态的添加表格功能

    动态添加Table表格

    本示例将详细介绍如何在ASP.NET后台使用C#语言来实现动态添加表格的功能。 首先,我们需要了解动态创建表格的基本步骤: 1. **创建表格对象**:在C#代码中,使用`new`关键字创建一个`HtmlTable`对象,这是ASP.NET...

    jQuery+ajax实现动态添加表格tr td功能示例

    ### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时,我们经常需要动态地从服务器获取数据,并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...

    JavaScript实现动态添加表格中的行

    在JavaScript编程中,动态添加表格行是一个常见的需求,特别是在数据可视化或者用户交互丰富的网页应用中。这个功能允许我们在用户操作或者接收到服务器数据时,实时地向HTML表格中插入新的行,更新显示的信息。以下...

    js动态增加表格行

    js增加动态表格,点击增加就增加一行,点击删除就删除一行,每行前面有勾选框,可以勾选,删除多行

    动态添加表格实例_aspx开发教程.rar

    在ASP.NET Web Forms开发中,动态添加表格是一个常见的需求,特别是在数据展示或用户输入场景下。这个"动态添加表格实例_aspx开发教程"应该详细介绍了如何在ASPX页面上实现这样的功能。动态表格允许开发者根据需要在...

    layui表格动态添加|layui表格可编辑

    layui表格动态添加|layui表格可编辑动态添加

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    在JavaScript(JS)中,创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求,尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先,我们需要在HTML中创建一个...

    动态 添加 表格 table

    动 态 添 加 表 格 动态添加表格 动态添加表格 动态添加表格

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    Android应用源码之android动态添加表格行-IT计算机-毕业设计.zip

    在Android应用开发中,动态添加表格行是一种常见的需求,特别是在数据展示或者用户交互场景下。这个"Android应用源码之android动态添加表格行"的压缩包文件提供了相关的示例代码,对于正在做毕业设计或者想要深入...

    动态添加表格和删除表格.html

    动态添加表格和删除表格.html

    动态添加js,动态添加表格和删除表格,批量添加记录,批量添加

    动态添加js,动态添加表格和删除表格,批量添加记录,批量添加

    点击按钮,动态添加表格

    通过按钮事件,实现动态添加表格元素,可以获得更多的表格

Global site tag (gtag.js) - Google Analytics