jQuery表和json

1. I'm trying to create a table in jQuery that will keep the same jQuery style I already have in my web site.

   The table :

   <table  id = "jobsTable"  data-role="table" >
   

   And its creating a table that doesn't have jQuery in.

2. I want part of my JSON to add as <tr> , here is the JSON ( from mongoDB sent by Ajax response) :

    { _id: 53f8c48ddc1f5f0419f2ed53,
     bName: 'Microsoft',
     phone: 35588319,
     Email: 'microsoft@gmail.com',
     field: 'QA',
     exp: '0-2'}
   

lets say I want to add to that table : bNmae, phone, Email, field, exp. Page main that include table :

<div data-role="main" class="ui-content">

        <label for="basic">JOBS</label>
        <table  id = "jobsTable"  data-role="table" >
        <thead> 
        <tr>
            <th>Company Name</th>
            <th>Email</th> 
            <th>Contact Number</th>
            <th>Field</th>
            <th>Expirence </th>
        </tr>
        </thead> 
        <tbody>
            <tr>
            <td>microsoft</td>
            <td>microsoft@gmail.com</td> 
            <td>0508-558310</td>
            <td>QA</td>
            <td>0-2</td>
        </tr>
        </tbody>
        </table>
</div>

and the javascript-ajax code :

$.ajax({
      type: 'GET',
      dataType: 'JSON',
      url:'http://localhost:3000/find',
      data: workerInfo, 
      success: function(jobs){
          // 1)insert each response data into table -


      }
    });

Make jobs an array of objects and try this:

var jobs = [{
  _id: '53f8c48ddc1f5f0419f2ed53',
  bName: 'Microsoft',
  phone: '35588319',
  Email: 'microsoft@gmail.com',
  field: 'QA',
  exp: '0-2'
}];

function newJob(jobs){
    for(var i=0; i<jobs.length; i++){
        $('tbody').append('<tr><td>'+jobs[i].bName+'</td><td>'+jobs[i].Email+'</td><td>'+jobs[i].phone+'</td><td>'+jobs[i].field+'</td><td>'+jobs[i].exp+'</td></tr>');
    }  
}
newJob(jobs)

Take the table rows out of your HTML

<table  id = "jobsTable"  data-role="table" >
  <thead> 
    <tr>
      <th>Company Name</th>
      <th>Email</th> 
      <th>Contact Number</th>
      <th>Field</th>
      <th>Expirence </th>
    </tr>
  </thead> 
  <tbody></tbody>
</table>

So, for the AJAX request, use:

function newJobs(jobs){
    for(var i=0; i<jobs.length; i++){
        $('tbody').append('<tr><td>'+jobs[i].bName+'</td><td>'+jobs[i].Email+'</td><td>'+jobs[i].phone+'</td><td>'+jobs[i].field+'</td><td>'+jobs[i].exp+'</td></tr>');
    }  
}
$.ajax({
    type: 'GET',
    dataType: 'JSON',
    url:'http://localhost:3000/find',
    data: workerInfo, 
    success: function(jobs){
        newJob(jobs);
    }
});