`
geeksun
  • 浏览: 967868 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用JavaScript动态增加或删除表格的行与列

JavaScriptHTMLBlog 
阅读更多

对于新增，可以使用insertRow函
对于删除，有两种方式：
1. 得到要删除的行在table中的序号rowindex,之后用table.deleteRow(rowindex)
2. 得到要删除的行, 之后tr.parentNode.removeChild(tr)

 

下面是一个demo

 

<HTML>
 <HEAD>
 <script language="javascript">
  var i=-1;
  function add(){
     i=i+1;
     var table=document.getElementById("table");
	 var row=table.insertRow();
	 var cell=row.insertCell();
	 cell.parentElement.id=i;
	 cell.innerHTML="数据源:<input type=\"text\" value=\""+i+"\"/>&nbsp;数据源:<input type=\"text\" value=\""+i+"\"/><input type=\"button\" value=\"del\" onclick=\"del(this.parentElement.parentElement,this.parentElement.parentElement.id)\"/>";
  }
  function del(src,index){
    var tr=document.getElementById(index);
 	tr.parentNode.removeChild(tr);
  }
 </script>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
 <input type="button" onClick="add()" value="add"/>

<table id="table" border="1">
  <tr>
    <td>数据项</td>
  </tr>
  </table>
 </BODY>
</HTML>

 ReFrom:http://www.mtime.com/my/zhd/blog/898436/

分享到：
| firebug 使用
评论
2 楼 geeksun 2010-04-30  
mjm13 写道
增么动态增加列呢？

add()就是动态增加列
1 楼 mjm13 2010-04-20  
增么动态增加列呢？
发表评论

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

相关推荐

    JavaScript动态操作表格，添加，删除行、列及单元格

    JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    javascript动态添加表格数据行

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

    jQuery 动态添加或删除表格行

    在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于处理DOM操作，包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先，我们来理解HTML表格的基本结构。一个表格由`...

    纯javascript增加删除表格行

    3. **删除行**：删除表格行通常涉及到选择要删除的行，并调用`removeChild()`方法。例如，假设我们想删除点击时的当前行，可以这样实现： ```javascript function deleteRow(event) { if (confirm('确定要删除...

    javascript动态操作表格

    你可以通过设置单元格或行的`class`或`style`属性来改变其视觉表示，或者使用`checked`属性来模拟多选。例如，你可以这样选中一个单元格： ```javascript var cell = document.getElementById('myCell'); cell....

    js 添加删除表格

    以下是一个简单的例子，展示如何使用JavaScript添加和删除表格行： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

    动态删除表格行、列、双击编辑.rar

    "动态删除表格行、列、双击编辑"的主题涉及到JavaScript编程、HTML和CSS等技术的应用，旨在实现用户交互性强、灵活多变的表格功能。下面将详细介绍这些知识点。 首先，动态删除表格行和列是Web应用中增强用户体验的...

    动态添加删除表!格动态添加删除表格!

    在IT领域，尤其是在网页开发和用户界面设计中，动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列，提高了交互性和用户体验。本篇将深入探讨这一主题，主要关注如何实现这个...

    JavaScript动态操作表格实例(添加,删除行,列及单元格)

    本文档主要介绍了如何使用JavaScript来动态操作HTML表格，包括添加、删除表格中的行、列以及单元格。以下是对文档中提及内容的知识点详细说明： ### 标题知识点 1. **JavaScript动态操作表格**：指利用JavaScript...

    JAVASCRIPT自动添加表格

    本篇文章将深入探讨如何使用JavaScript自动添加、删除表格，以及实现窗口居中显示的相关技术。 首先，让我们来理解“JavaScript自动添加表格”。在HTML中，表格由`&lt;table&gt;`元素定义，行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`...

    Ext扩展控件-----可以在代码中动态为表格增加一列或者删除一列

    在本教程中，我们将深入探讨如何通过EXT Grid的插件机制实现动态地在代码中添加或删除表格列，这正是“Ext grid AddRemovecolumn plugin”的核心功能。 首先，让我们理解EXT Grid的基本结构。EXT Grid由多个组件...

    jquery可增加删除列表格

    在实际应用中，使用jQuery增加或删除表格元素的步骤可能如下： 1. **HTML结构**：首先，需要一个基本的HTML表格结构，包括`&lt;table&gt;`、`&lt;tr&gt;`（表格行）和`&lt;td&gt;`（表格单元格）元素。 2. **引入jQuery**：在HTML...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    使用jQuery实现动态添加、删除表格

    本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行，这在数据展示和用户交互中非常常见，特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前，我们需要确保网页已经引入了jQuery库。...

    js动态添加删除表格

    在JavaScript（JS）中，动态添加和删除表格是常见的任务，尤其在开发交互式Web应用时。这涉及到了DOM（Document Object Model）操作，因为HTML表格实际上是由一系列DOM元素组成的。下面将详细介绍如何使用JavaScript...

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...

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

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

    jquery表格添加删除行点击按钮动态添加删除行

    通过点击按钮动态添加或删除表格行，可以提高用户的交互体验，使得数据管理更加灵活。 首先，我们需要创建一个基本的HTML结构，包含一个表格和两个按钮，分别用于添加新行和删除选中行。表格通常由`&lt;table&gt;`、`...

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

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

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