HTML增加/删除一行表格

head

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

body

<table align="center"width="100%" id="tab" border="1">
                        <tr>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>操作</th>
                        </tr>
						<tr id="show" >
							
							<td>
								<input id="name##" placeholder="请输入成员工号"/>
							</td>
							<td>
								<input id="phone##" placeholder="请输入成员姓名"/>
							</td>
						   
							<td>
								<button type="button" class="layui-btn layui-btn-primary"onclick="addRow()">添加</button>
								<button type="button"class="layui-btn layui-btn-primary" onclick="deleteRow(##)">删除</button>
							</td>
						</tr>
                    </table>

JS

function addRow() {
    var index = 0;//初始下标
    var indexArr= new Array();
    index++;
    indexArr.push(index);

    var showHtml = $("#show").html();
    var html = "<tr id=tr##>"+showHtml+"</tr>";
    html = html.replace(/##/g,index);//把##替换成数字

    $("#show").before($(html));

    console.log("当前下标数组",indexArr);}


    function deleteRow(inde){
        $("#tr" + inde).remove();
        var a = indexArr.indexOf(parseInt(inde));
 
        if (a > -1) {
            indexArr.splice(a, 1);
            console.log("当前下标数组",indexArr);
        }
 
    }
经验分享 程序员 微信小程序 职场和发展