好用的动态增删行，很好用...
<html>
<head></head>
<body>
<script type="text/javascript" >
function tableAdd(){
var rownum = table1.rows.length;
var newRow = table1.insertRow(rownum);
newRow.insertCell(0).innerHTML=document.all.div1.innerHTML;
newRow.insertCell(1).innerHTML=document.all.div2.innerHTML;
newRow.insertCell(2).innerHTML=document.all.div3.innerHTML;
newRow.insertCell(3).innerHTML=document.all.div4.innerHTML;
}
function tableDel(){
var rowIndex = getRowIndex();
table1.deleteRow(rowIndex);
}
function getRowIndex(){
try{
var Elm = event.srcElement;
while(Elm && Elm.tagName != "TR"){
Elm = Elm.parentElement;
}
var intRowIndex = Elm.rowIndex;
return intRowIndex;
}catch(ex){
}
}
</script>
<table id="table1" border="1" width="50%">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td><input type="button" onclick="javascript:tableDel();" value="DEL"/></td>
</tr>
</table>
<table width="50%">
<tr>
<td align="center"><input type="button" onclick="javascript:tableAdd();" value="Add"/>
</td>
</tr>
</table>
<div id="div1" style="display:none">
<input type="text" value="div1"/>
</div>
<div id="div2" style="display:none">
<input type="text" value="div2"/>
</div>
<div id="div3" style="display:none">
<input type="text" value="div3"/>
</div>
<div id ="div4" style="display:none">
<input type="button" onclick="javascript:tableDel();" value="DEL"/>
</div>
</body>
</html>
分享到：
相关推荐
标题中的“动态增删行插件”就是为了解决这个问题而设计的。这个插件的核心目标是提供一种简便的方式来实现动态增删行的操作，同时能够自动更新行号，确保用户界面的实时性和一致性。 首先，让我们了解一下什么是...
综上所述，这个项目展示了如何利用 Vue.js 和 Element UI 创建一个功能丰富的动态表格应用，包括单元格合并、表格编辑、动态增删行等功能。开发者可以参考这个项目学习 Vue 的数据绑定、组件化以及 Element UI 的...
javascript动态增删表格行
它提供了丰富的功能，如动态增删行、编辑等，使得Web应用的用户界面更加交互和灵活。下面将详细讲解jQuery Grid及其核心特性。 一、jQuery Grid简介 jQuery Grid，通常指的是JQGrid，是一款基于jQuery库的开源表格...
js 动态按行增删表格，删除使用复选框选中删除
在网页开发中，动态增删表格行是一种常见的交互功能，主要应用于数据展示和编辑场景。本文将详细讲解如何使用纯JavaScript实现这一功能，无需依赖任何外部库如jQuery或其他框架。 一、HTML基础结构 首先，我们需要...
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
本文将深入探讨如何使用这两者来实现表格的动态增删改查以及表单验证，这对于前端开发人员来说是必备技能。 首先，HTML（HyperText Markup Language）是网页内容的基础结构，而JavaScript则负责赋予这些内容动态...
通过这种方式，我们不仅实现了表格的动态增删行，还提供了友好的用户交互。同时，还可以根据实际需求进一步扩展，如增加编辑功能、数据排序、分页等。记住，JavaScript提供的强大DOM操作能力使我们在构建动态网页时...
在Angular开发中，动态增删行是常见的需求，特别是在数据展示和编辑的场景下。`Angular Material`库提供了强大的表格组件`MatTable`，能够帮助我们实现这些功能。本篇文章将详细探讨如何利用Angular和Angular ...
在给定的代码示例中，我们看到了一个利用JavaScript控制HTML表格增删行的实例，这在处理需要用户动态输入多条记录的场景时非常实用。 ### 标题解析：“javascript控制增删行” 这个标题简洁明了地指出了本文的核心...
本文将详细介绍如何结合这两种技术实现在Java中对MySQL、SQL Server或Oracle数据库进行动态的增删改查操作。 首先，Java反射机制允许我们在运行时检查类、接口、字段和方法的信息，甚至可以动态调用方法和修改字段...
在WebWork中处理表格（table）的动态增删行和列是一项常见的需求，尤其是在数据录入或者展示复杂数据结构时。本文将深入探讨如何在WebWork中实现这一功能。 首先，我们需要理解WebWork的工作原理。WebWork的核心...
在IT行业中，"增删改查"（CRUD）是数据库操作的基础，代表着创建（Create）、读取（Read）、更新（Update）和删除（Delete）四种基本功能。这些操作广泛应用于各种应用程序，从简单的数据管理工具到复杂的业务系统。...
本文将深入探讨如何在HTML中实现表格的动态增删行列。 一、HTML基础 在HTML中，`<table>`元素用于创建表格，`<tr>`表示表格行，`<td>`代表单元格，`<th>`则用于定义表头单元格。一个简单的表格结构可能如下： ```...
为了实现动态表格的增删查改，通常需要绑定各种DOM事件，如点击事件、键盘事件等。例如，添加按钮用于新增行，删除图标用于删除行，编辑图标用于修改单元格，以及搜索框用于筛选数据。事件处理函数会根据用户操作...
在网页开发中，动态增删表格行是一项常见的需求，它能提供用户友好的交互体验，尤其是在数据展示和编辑场景下。本文将详细分析一个用于实现这个功能的JS代码实例，帮助开发者更好地理解和应用。 首先，我们需要理解...
在网页设计中，"页面增删行"是一个常见的交互功能，尤其在数据表格或列表展示时，用户可能需要动态地添加或删除行以满足输入或管理数据的需求。本项目使用了jQuery这一流行的JavaScript库来实现这个功能，同时页面...
综上所述，这个压缩包提供了一个实用的示例，展示了如何使用jQuery结合响应式设计来创建一个具有动态增删行功能的表格。开发者可以通过学习这个示例，理解并应用到自己的项目中，提升用户体验。