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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
smarty内置函数section的用法
2015/01/22 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
基于JQuery实现的Select级联
2014/01/27 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python3 字符串知识点学习笔记
2020/02/08 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
建设幸福中国演讲稿
2014/09/11 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
三八节活动主持词
2015/07/04 职场文书
房产遗嘱范本
2015/08/06 职场文书
高一作文之乐趣
2019/11/21 职场文书
用python实现监控视频人数统计
2021/05/21 Python
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
MySQL GTID复制的具体使用
2022/05/20 MySQL
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL