前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用jquery追加table行

使用jquery追加table行

作者头像
xiny120
发布2019-06-13 20:44:36
2.4K0
发布2019-06-13 20:44:36
举报
文章被收录于专栏:毛毛v5
代码语言:javascript
复制
//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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.06.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档