界面
運(yùn)行結(jié)果
表頭部分
<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>
