<!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="javascript:void(0);" onclick="addTr()">新增</a></td> </tr> <tr> <td><input class="form-control"></td> <td><input class="form-control"></td> <td><a href="javascript:void(0);" onclick="deleteTr(this)">删除</a></td> </tr> <tr> <td><input class="form-control"></td> <td><input class="form-control"></td> <td><a href="javascript:void(0);" 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='javascript:void(0);' 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; }
下载示例：http://files.cnblogs.com/files/flying607/%E8%A1%A8%E6%A0%BC9.8.zip