jquery获取td、tr和表格里面所有值？

<div class="container">
<table id="tbl" class="table table-bordered table-hover">
    
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td>1</td>
        <td>Joe</td>
        <td>男</td>
        <td>22</td>
      </tr>
      <tr class="table-success">
        <td>2</td>
        <td>Doe</td>
        <td>女</td>
        <td>18</td>
      </tr>
      <tr class="table-danger">
        <td>3</td>
        <td>Moe</td>
        <td>男</td>
        <td>21</td>
      </tr>
      <tr class="table-info">
        <td>4</td>
        <td>Dooley</td>
        <td>女</td>
        <td>16</td>
      </tr>
      <tr class="table-warning">
        <td>5</td>
        <td>Refs</td>
        <td>女</td>
        <td>15</td>
      </tr>
    </tbody>
     
</table>
 
<div id="test"></div>
<div id="text"></div>
<div id="td_txt"></div>
 
</div>

*{ margin:0; padding:0;}
html,body{ margin:0; padding:0;}
.table{ margin-top:100px;}

$(function(){
     
    $('#tbl tr td').on('click',function(){
        var td_txt = $(this).text();
        console.log(td_txt);
        $('#td_txt').html(td_txt);
    });
     
    $('#tbl tbody tr').click(function(){
        var t_class = $(this).attr('class');
        console.log(t_class);
          
        var code_v=[]
        var tr = $(this).find("td").each(function(){
            code_v.push($(this).text())  //获取每一个td中的数据并放到数组中
        })
         
        console.log(code_v);
         
        var code_value=[]
        $(this).children('td').each(function(){
            code_value.push($(this).text())  //获取每一个td中的数据并放到数组中
        })    
         
        //console.log(code_value);
         
        $('#text').html(code_v);
         
       
    });
     
    var id = 'tbl';
    //console.log(tbl);
    var titles = $("#" + id).find("tr:first td");  //获得表头td数组
    //遍历非表头的，tr、td...拼装json
    var json = "[" + $("#" + id).find("tr:not(:first)").map(function(i, e) {
        return "{" + $(e).children("td").map(function(j, el) {
            return $(titles[j]).html() + ":" + $(el).html();
        }).get().join(",") + "}";
    }).get().join(",") + "]";
    $("#test").html(json); 
})