`
deserteaglec
  • 浏览: 3718 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

实现了表单向表格提交数据,并且提供删除当前行功能

阅读更多

实现了表单向表格提交数据,并且提供删除当前行功能

<table name="table1" border=1 id="table1">
<tr>
<td>名称</td><td>类型</td><td> </td>
</tr>
</table>

<input name="tagid"><input type="button" onclick="insertdata();">


<script lanugage="javascript">
function insertdata(){
var obj=document.all.table1;
var newrow,newcell;

newrow=obj.insertRow();
newcell=newrow.insertCell();
newcell.innerText="名称"+document.all.tagid.value;
newcell=newrow.insertCell();
newcell.innerText="类型"+document.all.tagid.value;
newcell=newrow.insertCell();
newcell.insertAdjacentHTML("BeforeEnd","<input type='button' value='删除' onclick='document.all.table1.deleteRow(this.parentElement.parentElement.rowIndex)'>");
}

function deletedata(obj){
document.all.table1.deleteRow(obj);
}
</script>

分享到:
评论

相关推荐

    Layui表格行添加编辑删除操作和保存数据代码.zip

    本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例,演示了如何在Layui表格中实现动态的行添加、编辑和删除功能,并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...

    js表格操作,DOM实现数据动态增删查改

    4. **数据删除** - 通过点击“删除”按钮触发删除操作,获取当前行的索引或标识。 - 根据索引或标识从数据数组中删除对应的记录,通常使用`splice`方法。 - 删除DOM中的对应行,可以使用`removeChild`方法。 5. ...

    Layui表格行添加编辑删除操作和保存数据代码

    本示例将详细介绍如何使用Layui实现表格行的添加、编辑、删除操作,并且在编辑后如何保存数据。 首先,我们需要了解Layui的table模块。Layui的table组件可以轻松创建各种复杂的表格,并提供多种自定义选项。在...

    使用elementui实现表格的增加、删除、跳转详情页功能

    在开发Web应用时,Vue.js是一个非常流行的前端框架,它提供了高效的数据绑定和组件化功能。Element UI则是基于Vue.js的UI组件库,为开发者提供了丰富的界面元素,使得构建用户界面变得简单快捷。本项目主要关注如何...

    jquery php+mysql 表格双击可编辑,表单失去焦点自动提交保存数据

    "jquery php+mysql 表格双击可编辑,表单失去焦点自动提交保存数据"是一个典型的例子,展示了如何结合前端技术和后端技术实现高效的数据管理。以下是这个项目涉及的关键知识点: 1. **jQuery**:jQuery是一个强大的...

    vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    Element UI是一个基于Vue 2.0的组件库,提供了丰富的UI组件,其中包括表格(Table)组件,非常适合用于实现复杂的表格操作,如添加、修改、单独删除以及批量删除行。本文将详细介绍如何在Element UI的表格组件中实现...

    jquery表格动态增删改及取数据绑定数据完整方案

    本文将深入探讨如何使用jQuery实现表格的动态增删改功能,并结合后台数据进行绑定,以构建高效的数据展示和管理界面。 首先,我们要理解jQuery的核心概念。jQuery通过选择器(如$("#id")或$(".class"))来选取DOM...

    jQuery实现表格的增加、修改、删除、保存代码

    本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能,这些功能是许多Web应用程序的核心部分,特别是在数据管理界面中。 ### 增加 在jQuery中,增加表格行通常是通过动态创建`&lt;tr&gt;`元素并将其...

    基于JavaScript和DOM的动态表单设计及数据提交.pdf

    该技术通过对表格树型结构的分析,利用DOM技术实现了一种可动态添加和删除表格的表单。该技术给出了两种有效的数据库连接方式,并对与当前主流浏览器的兼容性作了简要说明。相比传统的表单,动态表单突出了数据输入...

    一个增加表单input的例子/表单框按需求点击增加

    此外,为了提高用户体验,还可以考虑使用AJAX异步提交表单,以便在用户添加完所有姓名后一次性发送所有数据,而不是每次添加就提交一次。这需要结合服务器端语言(如PHP、Node.js等)进行处理。 总结来说,这个例子...

    table表单增删行列例子

    当我们需要创建交互式的表格,比如允许用户动态添加或删除行和列时,就需要利用JavaScript或者其他前端框架来实现这样的功能。本文将深入探讨如何在HTML中实现表格的动态增删行列。 一、HTML基础 在HTML中,`...

    jqgrid 表格的增删改查以及modal弹出框

    在这个项目文件“RuanTai.Finance”中,我们将深入探讨如何使用 jqGrid 实现这些功能,并且在修改和添加操作时使用 modal 弹出框来增强用户体验。 首先,让我们看看 jqGrid 的增删改查功能: **增加(Add)**:在 ...

    react-使用antd实现表格增删编辑分别基于react162和react163实现两种方式

    在本教程中,我们将深入探讨如何利用antd来创建一个具有增、删、编辑功能的表格,并且会针对React 16.2和React 16.3这两个不同版本来展示两种实现方式。 **React 16.2 实现** 在React 16.2中,我们可以利用antd的...

    jquery 实现可编辑表格

    例如,获取当前表格数据的方法如下: ```javascript function getTableData() { var data = []; $('#editableTable tbody tr').each(function() { var row = $(this).find('td').map(function() { return $...

    layui添加修改删除

    总结,layui添加修改删除的功能实现主要涉及layui的表格组件、表单组件、ajax模块以及提示组件。通过这些组件的灵活组合和使用,我们可以轻松实现数据的增删改查操作,大大提升了开发效率。在实际项目中,还需要结合...

    JavaScript获取表格(table)当前行的值、删除行、增加行

    在JavaScript中,操作HTML表格(table)是...这些技能在动态生成和更新表格数据的场景中非常实用,例如在前端表单提交、数据编辑和展示等。理解并掌握这些基本操作,能够帮助开发者更高效地处理与表格相关的交互逻辑。

    原生JS和JQuery动态添加、删除表格行的方法

    为了实现点击删除按钮即删除当前行的功能,可以将此按钮的`onclick`事件设置为调用删除函数,并将当前行的`this`作为参数传递。例如,以下代码演示了如何删除表格中的当前行: ```javascript function delRow(obj) ...

    用js创建form表单并提交.docx

    在JavaScript中创建并提交表单是一项常见的任务,特别是在网页交互和数据传递中。在这个文档中,我们看到一个基于JavaServer Pages (JSP) 的Web应用示例,它使用了JavaScript来处理用户界面交互。以下是对相关知识点...

    python测试开发django-173.bootstrap实现table表格行内编辑(csdn)————程序.pdf

    在本文中,我们将探讨如何使用Python的Django框架结合Bootstrap来实现一个简单的表格行内编辑功能。这个功能主要用于测试开发场景,简化了前端界面的复杂性,仅保留了基本的添加、删除和编辑行的操作。 首先,我们...

    JQuery实现可编辑的表格

    3. **事件监听**:通过监听键盘按键事件(`keyup`),实现了回车键提交数据的功能。 4. **数据更新**:当用户完成编辑后,可以通过回车键或点击其他地方自动保存数据,无需额外操作。 #### 五、扩展思考 - 如何...

Global site tag (gtag.js) - Google Analytics