jquery实现table动态添加行、删除行以及行的上移和下移
阴元青
//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" οnclick="history.go(-1);">取消</button>
</div>
</div>
</form>
</body>
类似资料：