Question

想知道这是我的bootstrap悬停类无法正常工作的原因。由于我在页面加载时使用jquery填充数据的方式？

这是我的表格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>

我正在使用express这样的东西在页面加载期间填充我的数据

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");
})
})

这是不起作用的原因吗？

Answer 1

也许会帮助你

您需要将td追加到tr，将tr追加到tbody。您的代码会追加到#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'));
    })
 })

bootstrap表盘旋类无法正常工作

1 个答案: