使用jQuery怎么动态操作表单

这篇文章给大家介绍使用jQuery怎么动态操作表单，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

在嵩县等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站建设、网站制作 网站设计制作按需定制开发,公司网站建设,企业网站建设,品牌网站设计,成都营销网站建设,成都外贸网站制作,嵩县网站建设费用合理。

具体如下：

  
  
  
    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;
    }
  


  
    
      
        序号
      
      
        步骤名称
      
      
        步骤描述
      
      
        相关操作 添加
      
    
  
  
  
  



  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(
    "" +
      "" + max_line_num + "" +
      "" +
      "" +
      "" +
        "上移 " +
        "下移 " +
        "删除 " +
      "" +
    "");
  }
  //删除选择记录
  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 = "";
    $('#content tr').each(function () {
      data += "";
      var stepName = $(this).find("td:eq(1)").find("input").val();
      var stepDescription = $(this).find("td:eq(2)").find("input").val();
      data += "  " + stepName + "";
      data += "  " + stepDescription + "";
      data += "";
    });
    data += "";
    alert(data);
  }

关于使用jQuery怎么动态操作表单就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

本文名称：使用jQuery怎么动态操作表单
网页路径：http://shouzuofang.com/article/pjiopc.html