首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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动态操作表单示例【基于table表格】

- Author -

gaohj

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现雪花飘落效果
Aug 02 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
英国购物网站(954) 中国购物网站(172) 韩国购物网站(27) 新加坡购物网站(41) 加拿大购物网站(185) 巴西购物网站(71) 德国购物网站(227) 西班牙购物网站(115) 瑞士购物网站(28) 美国购物网站(1542)
You might like
Php部分常见问题总结
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php获取字段名示例分享
2014/03/03 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
使用nodejs开发cli项目实例
2015/06/03 NodeJs
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python中字符串的常见操作技巧总结
2016/07/28 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Python logging模块原理解析及应用
2020/08/13 Python
什么是.net
2015/08/03 面试题
手机被没收检讨书
2014/02/22 职场文书
小学生自我评价100字（15篇）
2014/09/18 职场文书
求职自我评价范文
2015/03/09 职场文书
端午节寄语2015
2015/03/23 职场文书
Golang 对es的操作实例
2022/04/20 Golang