jquery mobile table insertion

by Tiago

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<button onclick="appendData()">Click here to append
</button>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
  <thead>
    <tr>
      <th>Q#BR</th>
      <th data-priority="1">campo1</th>
      <th data-priority="1">campo2</th>
      <th data-priority="1">campo3</th>
      <th data-priority="1">campo4</th>
      <th data-priority="2">campo5</th>
      <th data-priority="2">campo6</th>
      <th data-priority="2">campo7</th>
      <th data-priority="2">campo8</th>
    </tr>
  </thead>
  <tbody id="tb_detail">

  </tbody>
</table>

JavaScript

function appendData() {
  var exampleEl = {
    campo1: 1,
    campo2: 1,
    campo3: 1,
    campo4: 1,
    campo5: 1,
    campo6: 1,
    campo7: 1,
    campo8: 1
  };
  var data = [exampleEl, exampleEl];
  $('#tb_detail').empty();

  for (i = 0; i < data.length; i++) {
    $('#tb_detail').append('<tr> <td>' + data[i].campo1 +
      '</td><td>' + data[i].campo2 +
      '</td><td>' + data[i].campo3 +
      '</td><td>' + data[i].campo4 +
      '</td><td>' + data[i].campo5 +
      '</td><td>' + data[i].campo6 +
      '</td><td>' + data[i].campo7 +
      '</td><td>' + data[i].campo8 + '</td></tr>');
  }
  $('#link').attr('href', '#pg_alvo');
  $('#link').click();
  $('#pg_alvo').bind('pageinit', function() {
    $('#tb_detail').table('refresh');
  });
}