指定位置增加一行示例程式碼

劍握在手發表於2016-09-09
<!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

相關文章