界面

运行结果

表头部分

<link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">

    <link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">

    <link href="../css/animate.min.css" rel="stylesheet">

    <link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">

主体部分

HTML

<div class="ibox-content col-sm-3">

    <div class="form-group">

                                <div class="col-sm-7">

                                    <select class="form-control" id="sel">

  <option>灯泡</option>

  <option>锁</option>

  <option>拖把</option>

  <option>螺丝</option>

  <option>电线</option>

</select>

                                </div> <label class="col-sm-4 control-label">  <button  class="btn btn-primary" id="add_row">添加行</button></label>

                            </div>

<table  class="table">

<tbody id="test">

</tbody>

</table>

</div>

        <table style="display: none;">

            <tbody id="modo">

                <tr>

                </tr>

            </tbody>

        </table>

JQ代码

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <script>

            //var a = $("#test").children().length;

            //alert(a)

            $("#add_row").click(add_row)

            function add_row() { //添加行方法

                var mode_tr = $("#modo tr:first").clone();

                var selStr=$("#sel").val();

var td1= $("<td>"+selStr+"</td>").addClass("td_up");

    var td2 = $("<td><input type='text'/></td>").addClass("td_up");

var td3=$("<td><i class='fa  fa-times  text-navy' id='dele_row' onclick='dele_row(this)'></i></td>");

$("#test").append(mode_tr);

$(mode_tr).append(td1);

$(mode_tr).append(td2);

$(mode_tr).append(td3);

            }

            function dele_row(obj) {

                $(obj).parent().parent().remove();

            }

        </script>