jQuery Ajax获取Div

I'm having trouble with ajax response.

my .php file generates a table

    <div class="result">
        <tr class="distr">
           <td><input name="somename" value="value"></input</td>
           <td>..more input</td>
           ...more <tds>
       </tr>
    <div>

.js file

//...unrelated code up here

$.ajax({
    type: "POST",
    url: "myphpfile.php",
    data: "data that creates table",
    success: function(r) {
        var getdata = $(r).filter(".result");
        console.log(getdat);
    }
});

my main file has

<table class="tbl">
   <tr>
       <td><input></input></td>
       ...
   </tr>
</table>

I'm trying to get the table that is generated by my php file to be appended to

<table class="tbl">

but the response I get is only

<input>...</input>
<input>...</input>
some other div children here
<input>...</input>
some text

instead of everything in

<div class="result">

Can someone explain to me how this works. I've also tried .find(".result") instead of .filter() Oh and I dont want that div returned, just the table inside of it.

Sorry if this is hard to understand, all this looks weird as I'm typing.

Thanks

Try using jQuery.get ()

$.get( "myphpfile.php", { param1: "p1", param2: "p2" } )
    .done(function( data ) {
    var content = $( data ).find( ".result" );
});

Update:

$(".result").load("myphpfile.php .result", { param1: "p1", param2: "p2" })

Replace your div with a table, so it will be proper HTML.