轉自：https://blog.csdn.net/qq_39019735/article/details/78354359
//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>