表格新增一行 表头固定
HTML 代码
<!-- 表格 -->
<div class="addLine-table">
<table id="addTable" border="1" align="center">
<thead>
<tr>
<th class="text-center addLine-num addLine-padding">
<div class="addLine-num-item ">ID</div>
</th>
<th><div class="addLine-tr">物品名称</div></th>
<th><div class="addLine-tr">数量</div></th>
<th><div class="addLine-tr">规格</div></th>
<th><div class="addLine-tr">用途说明</div></th>
<th><div class="addLine-tr">主要技术参数</div></th>
</tr>
</thead>
<tbody>
<tr>
<td class="addLine-padding addLine-td addLine-noBorder">
<div class="addLine-num-item addLine-border">
<div class="addLine-id">1</div>
<div class="layui-row addLine-icon" style="display: none;">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
<a href="#" data-method="offset" data-type="auto" class="addLine-up">
<i class="layui-icon"></i>
</a>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4 addLine-del">
<a href="##" onClick="del(this)"><i class="layui-icon"></i></a>
</div>
</div>
</div>
</td>
<td> <input class="layui-input" value="11" /></td>
<td> <input class="layui-input" value="22" /></td>
<td> <input class="layui-input" value="22" /></td>
<td> <input class="layui-input" value="22" /></td>
<td> <input class="layui-input" value="22" /></td>
</tr>
</tbody>
</table>
</div>
<!-- 添加按钮 -->
<button type="button" class="layui-btn layui-form-item" onClick="add()">
<i class="layui-icon"></i> 添加
</button>
css代码
#addTable {
border: 1px solid #e6e6e6;
}
#addTable td {
padding: 9px 15px;
font-size: 14px;
}
.addLine-table{
width: 600px;
overflow-x: scroll;
border-right: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.addLine-table .layui-input{
width: 200px;
}
.addLine-table .layui-table th{
background-color: #ffffff;
}
.addLine-title{
margin: 10px;
font-weight: 700;
}
.addLine-icon,.addLine-id{
width: 60px;
text-align: center;
}
.addLine-icon i{
font-size: 22px;
}
.addLine-del{
margin-left: 10px;
}
.addLine-num-item{
border-right: 1px solid #e6e6e6;
padding: 10px 14px;
height: 35px;
line-height: 35px;
width: 55px;
}
.addLine-tr{
width:231px;
}
.addLine-padding{
padding: 0!important;
}
.addLine-td{
position: absolute;
background: #ffffff;
z-index: 99;
}
.addLine-noBorder{
border: none;
}
.addLine-border{
border-bottom: 2px solid #e6e6e6;
}
js 代码
reloadIndex();
scroll();
addUp();
// 改变序号
function changeIndex() {
var i = 1;
$(".addLine-id").each(function () {
$(this).html(i++);
})
return false;
}
// 添加一列
function add() {
$("#addTable").append(
'<tbody><tr><td class="addLine-padding addLine-td addLine-noBorder"><div class="addLine-num-item addLine-border"><div class="addLine-id">1</div><div class="layui-row addLine-icon" style="display: none;"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><a href="#" data-method="offset" data-type="auto" class="addLine-up"><i class="layui-icon"></i></a></div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4 addLine-del"><a href="##" onClick="del(this)"><i class="layui-icon"></i></a></div></div></div></td><td> <input class="layui-input" value="11" /></td><td> <input class="layui-input" value="22" /></td><td> <input class="layui-input" value="22" /></td><td> <input class="layui-input" value="22" /></td><td> <input class="layui-input" value="22" /></td></tr></tbody>'
);
changeIndex();
reloadIndex();
addUp();
return false;
}
// 删除该列
function del(object) {
object = $(object).parent().parent().parent().parent().parent();
object.remove();
changeIndex();
reloadIndex();
}
// 图标的显示隐藏
function reloadIndex() {
$("#addTable tbody tr").hover(function () {
$(this).find(".addLine-id").css('display', 'none');
$(this).find(".addLine-icon").css('display', 'block');
$(this).css("backgroundColor", "#f9f9f9")
}, function () {
$(this).find(".addLine-id").css('display', 'block');
$(this).find(".addLine-icon").css('display', 'none');
$(this).css("backgroundColor", "#ffffff")
});
return false;
}
// 表头固定
function scroll() {
$(".addLine-table").scroll(function () {
var left = $(".addLine-table").scrollLeft();
var trs = $(".addLine-table table thead tr, .addLine-table table tbody tr");
trs.each(function (i) {
$(this).children().eq(0).css({
"position": "relative",
"left": left,
"background-color": "white",
"z-index": 99
});
});
});
}