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 10 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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 clearstatcache()函数详解
2010/03/02 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php正则表达式学习笔记
2015/11/13 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Python 的 with 语句详解
2014/06/13 Python
python九九乘法表的实例
2017/09/26 Python
Python实现学校管理系统
2018/01/11 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
进程的查看和调度分别使用什么命令
2013/12/14 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
社区春季防火方案
2014/06/02 职场文书
生日庆典策划方案
2014/06/02 职场文书
生产车间标语
2014/06/11 职场文书
大二学生自我检讨书
2014/10/23 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
四则混合运算教学反思
2016/02/23 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript