本文实例讲述了jQuery动态操作表单。分享给大家供大家参考，具体如下：

<html>
<head>
  < >jquery表格操作</ >
  <  src=\"http://libs.baidu.com/jquery/2.0.0/jquery.min.js\"></ >
  <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\"  =\"add_line();\">添加</a>
      </td>
    </tr>
  </table>
  <table id=\"content\">
  </table>
  <input type=\"button\" value=\"提交数据\" id=\"btnSubmit\"  =\"SaveData()\" />
</body>
</html>
<  type=\"text/ \">
  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=\'stepDe ion\' value=\'步骤描述\" + max_line_num + \"\'></td>\" +
      \"<td class=\'td_Oper\'>\" +
        \"<span  =\'up_exchange_line(this);\'>上移</span> \" +
        \"<span  =\'down_exchange_line(this);\'>下移</span> \" +
        \"<span  =\'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 stepDe ion = $(this).find(\"td:eq(2)\").find(\"input\").val();
      data += \"  <stepName>\" + stepName + \"</stepName>\";
      data += \"  <stepDe ion>\" + stepDe ion + \"</stepDe ion>\";
      data += \"<item>\";
    });
    data += \"</root>\";
    alert(data);
  }
</ >

使用本站在线HTML/CSS/ 代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行上述代码可得到如下运行效果：

\"\"

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

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章