jQuery動(dòng)態(tài)操作表單示例【基于table表格】

更新時(shí)間：2018年12月06日 11:45:58 作者：gaohj

這篇文章主要介紹了jQuery動(dòng)態(tài)操作表單,結(jié)合實(shí)例形式分析了jQuery針對table表格的數(shù)據(jù)添加、刪除、元素修改、提交等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery動(dòng)態(tài)操作表單。分享給大家供大家參考，具體如下：

<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'>
        相關(guān)操作 <a href="#" rel="external nofollow" onclick="add_line();">添加</a>
      </td>
    </tr>
  </table>
  <table id="content">
  </table>
  <input type="button" value="提交數(shù)據(jù)" 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>&nbsp;" +
        "<span onclick='down_exchange_line(this);'>下移</span>&nbsp;" +
        "<span onclick='remove_line(this);'>刪除</span>&nbsp;" +
      "</td>" +
    "</tr>");
  }
  //刪除選擇記錄
  function remove_line(index) {
    if (index != null) {
      currentStep = $(index).parent().parent().find("td:first-child").html();
    }
    if (currentStep == 0) {
      alert('請選擇一項(xiàng)!');
      return false;
    }
    if (confirm("確定要?jiǎng)h除改記錄嗎？")) {
      $("#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('請選擇一項(xiàng)!');
      return false;
    }
    if (currentStep <= 1) {
      alert('已經(jīng)是最頂項(xiàng)了!');
      return false;
    }
    var upStep = currentStep - 1;
    //修改序號
    $('#line' + upStep + " td:first-child").html(currentStep);
    $('#line' + currentStep + " td:first-child").html(upStep);
    //取得兩行的內(nèi)容
    var upContent = $('#line' + upStep).html();
    var currentContent = $('#line' + currentStep).html();
    $('#line' + upStep).html(currentContent);
    //交換當(dāng)前行與上一行內(nèi)容
    $('#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('請選擇一項(xiàng)!');
      return false;
    }
    if (currentStep >= max_line_num) {
      alert('已經(jīng)是最后一項(xiàng)了!');
      return false;
    }
    var nextStep = parseInt(currentStep) + 1;
    //修改序號
    $('#line' + nextStep + " td:first-child").html(currentStep);
    $('#line' + currentStep + " td:first-child").html(nextStep);
    //取得兩行的內(nèi)容
    var nextContent = $('#line' + nextStep).html();
    var currentContent = $('#line' + currentStep).html();
    //交換當(dāng)前行與上一行內(nèi)容
    $('#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(); //阻止事件冒泡
  }
  //保存數(shù)據(jù)
  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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，測試運(yùn)行上述代碼可得到如下運(yùn)行效果：