CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
user1897151
user1897151

Reputation: 503

bootstrap table hover class not working

wondering is this the cause of why my bootstrap hover class is not working. Due to the way i use jquery to populate my data when page load?

here is my table html

 <table id="currency" class="table table-hover table-sm">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Date</th>
        <th scope="col">JPY</th>
        <th scope="col">USD</th>
        <th scope="col">SGD</th>
        <th scope="col">AUD</th>
        <th scope="col">THB</th>
        <th scope="col">CNY</th>
        <th scope="col">TWD</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

and i am using something like this with express to populate my data during the page load

jQuery.get('/currency', function(dreams) {
console.log(dreams)
dreams.forEach(function(dream) {
  $('<tr>').appendTo("#currency>tbody");
  $('<td></td>').text(dream.date_time).appendTo('#currency>tbody');
  $('<td></td>').text(parseFloat(dream.jpy).toFixed(5)).appendTo('#currency>tbody');
  $('<td></td>').text(parseFloat(dream.usd).toFixed(2)).appendTo('#currency>tbody');
  $('<td></td>').text(parseFloat(dream.sgd).toFixed(2)).appendTo('#currency>tbody');
  $('<td></td>').text(parseFloat(dream.aud).toFixed(2)).appendTo('#currency>tbody');
  $('<td></td>').text(parseFloat(dream.thb).toFixed(3)).appendTo('#currency>tbody');
  $('<td></td>').text(parseFloat(dream.cny).toFixed(3)).appendTo('#currency>tbody');
  $('<td></td>').text(parseFloat(dream.twd).toFixed(3)).appendTo('#currency>tbody');
  $('</tr>').appendTo("#currency>tbody");
})
})

is this the cause of it not working?

Upvotes: 0

Views: 464

Answers (1)

Tan Duong
Tan Duong

Reputation: 2142

Maybe will help you

You need append td to tr and tr to tbody.Your code is append all to #currency>tbody

jQuery.get('/currency', function(dreams) {
    console.log(dreams)
    dreams.forEach(function(dream) {
      var tr = $('<tr>');
      $('<td></td>').text(dream.date_time).appendTo(tr);
      $('<td></td>').text(parseFloat(dream.jpy).toFixed(5)).appendTo(tr);
      $('<td></td>').text(parseFloat(dream.usd).toFixed(2)).appendTo(tr);
      $('<td></td>').text(parseFloat(dream.sgd).toFixed(2)).appendTo(tr);
      $('<td></td>').text(parseFloat(dream.aud).toFixed(2)).appendTo(tr);
      $('<td></td>').text(parseFloat(dream.thb).toFixed(3)).appendTo(tr);
      $('<td></td>').text(parseFloat(dream.cny).toFixed(3)).appendTo(tr);
      $('<td></td>').text(parseFloat(dream.twd).toFixed(3)).appendTo(tr);
      tr.appendTo($('#currency>tbody'));
    })
 })

Upvotes: 1

Related Questions