在填写表单的时候，往往有某些表格项的记录的条数是不可预计的，需要动态插入表单，有两种方法可以解决，一种是通过控件的stype属性，即先将控件的代码敲上去，然后讲
style属性设置为“display:none”，在需要增加记录的时候，将style属性设置为"display:block"即可，这样做无法预计所需的新增记录行的条数，很大程度上造成代码的浪费，下面使用另外一种方法：
<script type="text/javascript">
//---------------动态在表格中插入行------------------------
function addMore(field){
var name=field.name;
var table=document.getElementById(name);
var len=table.rows[1].cells.length; //返回表格中的列数
var newTr=table.insertRow();
for(var i=0;i<len;i++){
var newTd=newTr.insertCell();
newTd.innerHTML=table.rows[1].cells[i].innerHTML;
}
}
//-----------------动态删除表格中指定的行---------------
function delRow(index,field){
var name=field.name;
if(index==-9999){
alert("没有选中需要删除的行！");
}else{
document.getElementById(name).deleteRow(index);
rowNumber=-9999;
}
}
//---------得到所在行的行标------------------------
function getRow(){
rowNumber=window.event.srcElement.parentElement.parentElement.rowIndex;
}
//-->
</script>
<form>
<body>
<center>个人专长</center>
<hr width="700"/>
<table width="930" border="1" align="center" id="skillTable">
<tr>
<th></th>
<th>专长类别</th>
<th>情况说明</th>
<th>
<a href="javascript:void()" name="skillTable" onClick="addMore(this)">更多</a>
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="box" onClick="getRow()"/>
</td>
<td>
<input type="text" name="s_kind"/></td>
<td>
<input type="text" name="s_explain" size="60"/></td>
<td>
<a href="javascript:void()" onClick="delRow(rowNumber,this)" name="skillTable">删除</a>
</td>
</tr>
</table>
</body>
<form>
注意：只要将table的id属性，“删除”和“更多”两了超链接的name属性，这三个属性值设置一样就可以！
分享到：
相关推荐
在网页开发中，表格是一种常见的数据展示方式，而动态插入行是提高用户体验和交互性的重要技术。本知识点主要探讨如何使用JavaScript（简称JS）来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本...
这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容，但我们可以根据这个主题进行深入的讨论。 首先，我们要理解表格（Table）在HTML中的基本结构。...
在实际开发中，动态插入和删除表格行是非常实用的功能。例如，在管理后台系统中，管理员可能需要添加新的记录或删除旧的记录。这种情况下，使用 JavaScript 来动态操作表格可以极大地提高用户体验。 #### 四、注意...
当我们谈论动态增加表格行时，我们通常指的是在已有的表格结构中插入新的`<tr>`元素。 ### 1. 动态增加表格行 增加表格行通常涉及以下步骤： 1. **获取表格引用**：首先，我们需要获取到表格元素的引用。这可以...
js 表格编辑 插入行 删除行 编辑数据 将表格内容生产json格式
这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先，让我们了解一下这个功能的核心概念： 1. **HTML结构**：基础的HTML表格由`<table>`元素定义，包括`<thead>`...
本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能，这在许多网页应用中是非常常见的需求。 首先，让我们理解基本概念。在HTML中，表格由`<table>`元素定义，每行由`<tr>`元素表示，而单元格则由`<td>`...
2. **使用“布局”选项卡：** 用户也可以通过选择表格后，点击“布局”选项卡，在“行和列”组中找到更多的操作选项，包括插入、删除以及合并单元格等。 3. **批量操作：** 如果需要在同一位置连续插入多行或多列，...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
在IT行业中，尤其是在Web开发领域，表格是一种常用的数据展示方式，用户经常需要对表格中的行进行动态添加或删除操作。这篇博文"表格行记录动态增加和删除"主要探讨了如何在网页应用中实现这一功能，这通常是通过...
插入删除表格，用javascript实现，动态增加行和删除行，很简单。
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...
本主题聚焦于一款能够实现类似Excel功能的前端表格工具，它允许用户进行编辑、合并单元格、删除和插入行等操作，极大地提高了数据管理和交互的便利性。下面将详细探讨这款表格组件的关键特性和实现技术。 首先，该...
在这个例子中，DOM操作用于动态地向表格中插入新的行（`insertRow`）和单元格（`insertCell`）。 2. 表格操作：表格是HTML中表示表格数据的结构，由`<table>`、`<tr>`（表格行）、`<td>`（表格数据单元格）或`<th>`...
在 EXCEL 表格中，每一行之前插入相同数据优质资料.doc 本文主要介绍了在 EXCEL 表格中，每一行之前插入相同数据的方法，并且提供了快速筛选重复数据的技巧和使用 MapInfo 软件进行地理信息处理的方法。 一、在 ...
在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...
插入行或列的功能则需要在HTML结构中动态创建新的`<tr>`或`<td>`元素，并将其插入到合适的位置。这通常涉及到DOM操作，如`insertBefore()`或`appendChild()`方法。 删除行或列时，我们需要找到要删除的元素，然后...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例，演示了如何在Layui表格中实现动态的行添加、编辑和删除功能，并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...