jQuery实现表单动态添加与删除数据操作示例

本文实例讲述了jQuery实现表单动态添加与删除数据操作。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户名注册</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#button").click(function () {
        var name = $("#yonghu").val();
        var mima = $("#mima").val();
        var youxiang = $("#youxiang").val();
        var tr = "<tr><td>" + '<input type="checkbox">' + "</td><td>" + name + "</td><td>" + mima + "</td><td>" + youxiang + "</td><td>" + '<input type="button" value="删除">' + "</td></tr>";
        $("#table").append(tr);
        $(":button").click(function () {
          $(this).parent().parent().remove();
        });
      });
    });
  </script>
</head>
<body>
用户:<input id="yonghu" type="text">
密码:<input id="mima" type="password">
邮箱:<input id="youxiang" type="text">
<input type="submit" id="button" value="添加">
<table id="table" border="1ps">
  <tr>
    <td><input type="checkbox"></td>
    <td>用户名</td>
    <td>密码</td>
    <td>邮箱</td>
    <td>操作</td>
  </tr>
</table>
</body>
</html>

运行结果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery动态创建DOM、表单元素的实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery动态改变form属性提交表单

    有些情况下,同一个form在不同的情况下提交到不同的处理动作,可以在js中动态改变form的属性,满足不同条件的form提交需求. 如: 复制代码 代码如下: <form id="form" name="form" method="POST" enctype="multipart/form-data" action="action1.jsp" target="iframe">

  • 基于JQuery的动态删除Table表格的行和列的代码

    首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 复制代码 代码如下: for(var i=0;i<num+1;i++) { $("table tr").eq(i).find("td").eq(0).remove(); } 解释: num是从后台获取到的列表总和+1是为了表头那个也去掉. 第一个eq(i)是获取Table里的TR索引 第二个

  • jQuery动态设置form表单的enctype值(实现代码)

    代码简单, 注意2个地方enctype和encoding 复制代码 代码如下: $("#form").attr("enctype", "multipart/form-data");            $("#form").attr("encoding", "multipart/form-data");            $("#form").attr(&quo

  • jQuery动态操作表单示例【基于table表格】

    jQuery动态操作表单示例【基于table表格】

    本文实例讲述了jQuery动态操作表单.分享给大家供大家参考,具体如下: <html> <head> <title>jquery表格操作</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> table { border: bla

  • JQuery Ajax动态生成Table表格

    JQuery Ajax动态生成Table表格

    前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

  • jQuery实现表单动态添加数据并提交的方法

    本文实例讲述了jQuery实现表单动态添加数据并提交的方法.分享给大家供大家参考,具体如下: 情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.a

  • jQuery实现表单动态加减、ajax表单提交功能

    对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了.现在我了解的一些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs,前两个还是目前的主流趋势.第二种就是基于市面上的一些非主流工具包,比如BUI,FLatUI等,再结合自己的dom操作. 好了,废话不多说了,本篇文章主要讲怎么去实现表单动态加减的效果,花了一天时间搞出来,特来分享一下.本文主要分为两部分: 一是页面表单

  • jQuery实现表单动态添加与删除数据操作示例

    jQuery实现表单动态添加与删除数据操作示例

    本文实例讲述了jQuery实现表单动态添加与删除数据操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户名注册</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js

  • jQuery实现的简单动态添加、删除表格功能示例

    jQuery实现的简单动态添加、删除表格功能示例

    本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;

  • Yii2.0框架模型添加/修改/删除数据操作示例

    本文实例讲述了Yii2.0框架模型添加/修改/删除数据操作.分享给大家供大家参考,具体如下: 添加数据 $user = new User(); $user->name = 'zhang'; $user->age = 28; $data = $user->save();//添加数据 $data = $user->insert();//添加数据 $id = $user->attributes['id'];//获取当前添加数据后的自增id 修改数据 $user = $User::f

  • Js为表单动态添加节点内容的方法

    Js为表单动态添加节点内容的方法

    本文实例讲述了Js为表单动态添加节点内容的方法.分享给大家供大家参考.具体如下: 1. 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtm

  • jQuery实现为table表格动态添加或删除tr功能示例

    本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: <!-- 订单明细dialog --> <div id="contractDetailDiv" title="销售订单明细" style="display:none;"> <table class="exhibit_table" id="contractDeta

  • Vue表单类的父子组件数据传递示例

    使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明. 与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同. 1.传递基本类型数据 当子

  • Python实现动态添加属性和方法操作示例

    本文实例讲述了Python实现动态添加属性和方法操作.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 class Person(): def __init__(self, name, age): self.name = name self.age = age p1 = Person('ff', '28') print(p1.name, p1.age) # 给实例对象动态添加sex属性 p1.sex = 'female' print(p1.sex

  • Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例

    本文实例讲述了Thinkphp5.0框架使用模型Model的获取器.修改器.软删除数据操作.分享给大家供大家参考,具体如下: 一.获取器 在model中使用 get+字段名+Attr,可以修改字段的返回值. 数据库中性别保存为,0未知.1男.2女,查询时返回汉字: model: //将性别的012修改为未知.男.女返回 public function getSexAttr($val){ switch($val){ case '1' : return '男'; case '2': return '

随机推荐