<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Godot Engine">
<meta name="description" content="">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/table.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<table width="100%" class="table table-bordered text-center table-list">
<tbody>
<tr>
<td align="left" colspan="3">四、经济效益</td>
</tr>
<tr>
<td colspan="3">自行实施情况</td>
</tr>
<tr>
<td class="bac" width="100px">
<div class="out">
<p class="p1">时间</p>
<p class="p2">项目</p>
</div>
</td>
<td>实施日至20日底</td>
<td>20年初至20年底</td>
</tr>
<tr>
<td>产量</td>
<td><input class="form-control"></td>
<td><input class="form-control"></td>
</tr>
<tr>
<td>新增销售额（万元）</td>
<td><input class="form-control"></td>
<td><input class="form-control"></td>
</tr>
<tr>
<td>新增利润（万元）</td>
<td><input class="form-control"></td>
<td><input class="form-control"></td>
</tr>
<tr>
<td>新增出口额（万元）</td>
<td><input class="form-control"></td>
<td><input class="form-control"></td>
</tr>
<tr>
<td colspan="3" align="left">
<p>经济效益说明（或列表）：（1000字以内）</p>
<textarea class="form-control"></textarea>
</td>
</tr>
</tbody>
</table>
<table width="100%" id="aTable" class="table table-bordered text-center">
<tbody>
<tr>
<td align="left" colspan="3">四、经济效益</td>
</tr>
<tr>
<td colspan="2">专利出资情况（可加行）</td>
<td align="center">操作</td>
</tr>
<tr>
<td align="center">单位名称</td>
<td align="center">出资万元</td>
<td><a href=";" onclick="addTr()">新增</a></td>
</tr>
<tr>
<td><input class="form-control"></td>
<td><input class="form-control"></td>
<td><a href=";" onclick="deleteTr(this)">删除</a></td>
</tr>
<tr>
<td><input class="form-control"></td>
<td><input class="form-control"></td>
<td><a href=";" onclick="deleteTr(this)">删除</a></td
</tr>
<tr>
<td>合计（万元）</td>
<td><input class="form-control"></td>
<td><a href="">计算</a></td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
function addTr(){
//var table = $("#aTable");
var tr= $("<tr>" +
"<td><input class='form-control'></td>" +
"<td><input class='form-control'></td>" +
"<td><a href=';' onclick='deleteTr(this)'>删除</a></td>");
//table.append(tr);
var lastIndex = $('#aTable:first tbody tr').length-2;
var lastRow=$('#aTable:first tbody tr:eq('+lastIndex+')');
lastRow.after(tr);
}
function deleteTr(aObject){
//$(e.target).parents("tr").remove();
var tr=$(aObject).parents("tr");
tr.remove();
}
</script>
</html>
bootstrap使用V3以上版本
table.css如下：
.out{
position:relative;
}
.p1{
position:absolute;
top:-5px;
left:28px;
width:80px;
}
.p2{
position:absolute;
top:15px;
left:-22px;
width:80px;
}
table.table-list td.bac{
background: url(../img/table_bac.png) no-repeat center;
height: 47px;
}
