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


Posted in jQuery onDecember 06, 2018

本文实例讲述了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: black solid 1px;
      border-collapse: collapse;
    }
    td
    {
      border: black solid 1px;
      padding: 3px;
    }
    .td_Num
    {
      width: 60px;
      text-align: center;
    }
    .td_Item
    {
      width: 160px;
      text-align: center;
    }
    .td_Oper
    {
      width: 120px;
      text-align: center;
    }
    .td_Oper span
    {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td class='td_Num'>
        序号
      </td>
      <td class='td_Item'>
        步骤名称
      </td>
      <td class='td_Item'>
        步骤描述
      </td>
      <td class='td_Oper'>
        相关操作 <a href="#" rel="external nofollow" onclick="add_line();">添加</a>
      </td>
    </tr>
  </table>
  <table id="content">
  </table>
  <input type="button" value="提交数据" id="btnSubmit" onclick="SaveData()" />
</body>
</html>
<script type="text/javascript">
  var currentStep = 0;
  var max_line_num = 0;
  //添加新记录
  function add_line() {
    max_line_num = $("#content tr:last-child").children("td").html();
    if (max_line_num == null) {
      max_line_num = 1;
    }
    else {
      max_line_num = parseInt(max_line_num);
      max_line_num += 1;
    }
    $('#content').append(
    "<tr id='line" + max_line_num + "'>" +
      "<td class='td_Num'>" + max_line_num + "</td>" +
      "<td class='td_Item'><input type='text' class='stepName' value='步骤名称" + max_line_num + "'></input></td>" +
      "<td class='td_Item'><input type='text' class='stepDescription' value='步骤描述" + max_line_num + "'></td>" +
      "<td class='td_Oper'>" +
        "<span onclick='up_exchange_line(this);'>上移</span> " +
        "<span onclick='down_exchange_line(this);'>下移</span> " +
        "<span onclick='remove_line(this);'>删除</span> " +
      "</td>" +
    "</tr>");
  }
  //删除选择记录
  function remove_line(index) {
    if (index != null) {
      currentStep = $(index).parent().parent().find("td:first-child").html();
    }
    if (currentStep == 0) {
      alert('请选择一项!');
      return false;
    }
    if (confirm("确定要删除改记录吗?")) {
      $("#content tr").each(function () {
        var seq = parseInt($(this).children("td").html());
        if (seq == currentStep) { $(this).remove(); }
        if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); }
      });
    }
  }
  //上移
  function up_exchange_line(index) {
    if (index != null) {
      currentStep = $(index).parent().parent().find("td:first-child").html();
    }
    if (currentStep == 0) {
      alert('请选择一项!');
      return false;
    }
    if (currentStep <= 1) {
      alert('已经是最顶项了!');
      return false;
    }
    var upStep = currentStep - 1;
    //修改序号
    $('#line' + upStep + " td:first-child").html(currentStep);
    $('#line' + currentStep + " td:first-child").html(upStep);
    //取得两行的内容
    var upContent = $('#line' + upStep).html();
    var currentContent = $('#line' + currentStep).html();
    $('#line' + upStep).html(currentContent);
    //交换当前行与上一行内容
    $('#line' + currentStep).html(upContent);
    $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
    $('#line' + upStep).css("background-color", "yellow");
    event.stopPropagation(); //阻止事件冒泡
  }
  //下移
  function down_exchange_line(index) {
    if (index != null) {
      currentStep = $(index).parent().parent().find("td:first-child").html();
    }
    if (currentStep == 0) {
      alert('请选择一项!');
      return false;
    }
    if (currentStep >= max_line_num) {
      alert('已经是最后一项了!');
      return false;
    }
    var nextStep = parseInt(currentStep) + 1;
    //修改序号
    $('#line' + nextStep + " td:first-child").html(currentStep);
    $('#line' + currentStep + " td:first-child").html(nextStep);
    //取得两行的内容
    var nextContent = $('#line' + nextStep).html();
    var currentContent = $('#line' + currentStep).html();
    //交换当前行与上一行内容
    $('#line' + nextStep).html(currentContent);
    $('#line' + currentStep).html(nextContent);
    $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
    $('#line' + nextStep).css("background-color", "yellow");
    event.stopPropagation(); //阻止事件冒泡
  }
  //保存数据
  function SaveData() {
    var data = "<root>";
    $('#content tr').each(function () {
      data += "<item>";
      var stepName = $(this).find("td:eq(1)").find("input").val();
      var stepDescription = $(this).find("td:eq(2)").find("input").val();
      data += "  <stepName>" + stepName + "</stepName>";
      data += "  <stepDescription>" + stepDescription + "</stepDescription>";
      data += "<item>";
    });
    data += "</root>";
    alert(data);
  }
</script>

使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行上述代码可得到如下运行效果:

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

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

jQuery 相关文章推荐
jQuery表单设置值的方法
Jun 30 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
You might like
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
python代码如何注释
2020/06/01 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
初中学生评语大全
2014/04/24 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis