jQuery表格添加数据并Ajax提交数据

实现效果

HTML

DOCTYPE html>


	
	Document
	




    #mform{ margin: 10px;  }
    #mtable{ border-collapse: collapse; }
    #mtable thead th,#mtable thead td{ min-width: 120px; }
    #mdiv{ display: none; }


姓名：  
学历：  
年龄：  



    
        
            
                姓名
                学历
                年龄
            
        
        
        
    
    
    




$(function(){
    //添加tr
    $('#add').click(function(){
        var name = $("input[name='name']").val();
        var education = $("input[name='education']").val();
        var age = $("input[name='age']").val();
        var html = '';
        html += '';
        html += ''+name+'';
        html += ''+education+'';
        html += ''+age+'';
        html += '';
        $('#mtbody').append(html);
    });

    //提交
    $('#sub').click(function(){
        $('#mdiv').html('');
        $.each($('#mtbody tr'),function(k){
            var name = $('.name', this).text();
            var education = $('.education', this).text();
            var age = $('.age', this).text();
            var html = '';
            html += '';
            html += '';
            html += '';
            $('#mdiv').append(html);
        });
        var data = $("#mform").serialize();
        $.ajax({
            type: "POST",
            data: data,
            url: "http://example.com/api/excel_import_export",
            dataType: 'json',
            success: function (json) {}
        });
    });
});

php