jquery实现table动态添加行、删除行以及行的上移和下移

最新推荐文章于 2022-12-31 10:35:43 发布

key_zhaojd

最新推荐文章于 2022-12-31 10:35:43 发布

阅读量4.3k

点赞数

分类专栏： jQuery 文章标签： jQuery table动态添加行行的上下移动

本文链接：https://blog.csdn.net/ZJDWHD/article/details/54094932

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

当前元素.click(function(){}); 和当前元素.on(‘click’,function(){});这两种写法是一样的；还可以写成 $(document).on(‘click’,’当前元素’,function(){});

//js代码
$(function(){
    $('#insertRow').click(function(){
        var $tr = $('#templateTr').clone(true);
        $tr.attr('id','');
        $('#columnid tbody').append($tr);
        $tr.show();
    });

    $('#columnid .delrow').click(function(){
        var $tr = $(this).parents("tr");
        $tr.remove();
    });

    $('#columnid .moveup').on('click',function(){
        $(this).each(function(){
            var $tr = $(this).parents("tr");
            if($tr.index() != 0){
                $tr.prev().before($tr);
            }
        });
    });

    $('#columnid .movedown').on('click',function(){
        var trLength = $(this).length;
        $(this).each(function(){
            var $tr = $(this).parents("tr"); 
            if ($tr.index() != trLength - 1) { 
                $tr.next().after($tr);
            }
        });
    });

    /*$(document).on('click','#columnid .movedown',function(){
        var trLength = $("#columnid .movedown").length;
        $(this).each(function(){
            var $tr = $(this).parents("tr"); 
            if ($tr.index() != trLength - 1) { 
                $tr.next().after($tr);
            }
        });
    });*/
});

//html页面代码，这里的很多class属性值都是bootstrap框架的样式，可以忽略
<body>
<h3 style="margin-left: 1%">新增任务</h3>
<form class="form-horizontal" role="form" action="">
  <div class="form-group">
    <label class="col-sm-3 control-label">任务名称</label>
    <div class="col-sm-3">
      <input type="text" class="form-control input-sm" id="" placeholder="请输入任务名称" />
    </div>
    <label class="col-sm-1 control-label">数据源</label>
    <div class="col-sm-3">
      <select class="form-control input-sm">
        <option>选项</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">schema</label>
    <div class="col-sm-3">
      <input type="text" class="form-control input-sm" id="" />
    </div>
    <label class="col-sm-1 control-label">周期</label>
    <div class="col-sm-3">
      <select class="form-control input-sm">
        <option value="1">年</option>
        <option value="2">月</option>
        <option value="3">日</option>
        <option value="4">季度</option>
      </select>
    </div>
  </div>
  <a class="btn btn-primary btn-sm" id="insertRow" href="javascript:void(0);">
      <span class="glyphicon glyphicon-plus"></span> 新增</a>
  <table id="columnid" class="table table-striped table-bordered table-hover table-condensed">
    <thead>
      <tr id="trcolumn">
        <th>字段名称</th>
        <th class="col-sm-1">字段类型</th>
        <th>属性</th>
        <th>参与主键</th>
        <th class="col-sm-2">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr id="templateTr" style="display: none;">
        <td><input type="text" class="form-control input-sm" placeholder="请输入字段名称"/></td>
        <td>
          <select class="form-control input-sm">
            <option value="1">数字</option>
            <option value="2">字符</option>
            <option value="3">日期</option>
          </select>
        </td>
        <td><input type="text" class="form-control input-sm" placeholder="如果是字符，填字符长度；如果是日期，填日期格式"/></td>
        <td><label class="checkbox-inline"><input type="checkbox" name="bePk" />参与主键</label></td>       
        <td>
          <a class="btn btn-primary btn-xs delrow" href="javacript:void(0);"><span class="glyphicon glyphicon-trash"></span> 删除</a>
          <a class="btn btn-primary btn-xs moveup" href="javascript:void(0);"><span class="glyphicon glyphicon-arrow-up"></span> 上移</a>
          <a class="btn btn-primary btn-xs movedown" href="javascript:void(0);"><span class="glyphicon glyphicon-arrow-down"></span> 下移</a>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="form-group">
  <label class="col-sm-5 control-label"></label>
    <div class="col-sm-2">
      <button type="submit" class="btn btn-primary">确定</button>
      <button type="button" class="btn btn-primary" onclick="history.go(-1);">取消</button>
    </div>
  </div>
</form>
</body>