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

2019-11-19 12:23:28

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/code/HtmlJsRun，测试运行上述代码可得到如下运行效果：