使用jQuery动态生成表格行-优快云博客

本文链接：https://blog.youkuaiyun.com/u013562120/article/details/84802916

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <title></title>
 <script>
     $(document).ready(function(){
         //<tr/>居中
       $("#tab tr").attr("align","center");
        
        //增加<tr/>
        $("#but").click(function(){
            var _len = $("#tab tr").length;        
            $("#tab").append("<tr id="+_len+" align='center'>"
                 +"<td>"+_len+"</td>"
                 +"<td><input type='text' name='mc_"+_len+"' id='mc_"+_len+"' /></td>"
                 +"<td><input type='text' name='dhhm_"+_len+"' id='dhhm_"+_len+"' /></td>"
                 +"<td><a href=\'#\' οnclick=\'finish("+_len+")\'>完成</a></td>"
                 +"<td><a href=\'#\' οnclick=\'deltr("+_len+")\'>删除</a></td>"
               +"</tr>");            
        })    
    })
    
    //删除<tr/>
    var deltr =function(index)
    {
        var _len = $("#tab tr").length;
        $("tr[id='"+index+"']").remove();//删除当前行   
    }
	
	function finish(index){
	    alert("mc:" + $("#mc_"+index).val());
		alert("dhhm:" + $("#dhhm_"+index).val());
	}
</script>
</head>
<body>
    
    <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
        <tr>
            <td width="20%">序号</td>
            <td>名称</td>
            <td>电话号码</td>
            <td colspan='2'>操作</td>
       </tr>
    </table>
    <div style="border:2px; 
                border-color:#00CC00; 
                margin-left:20%;
                margin-top:20px">
        <input type="button" id="but" value="增加"/>
    </div>
</body>
</html>

jquery动态新增行