Не применяются стили bootstrap для класса .table-hover

126

31 января 2021, 08:30

Всем привет. Есть проект на vue с компонентами(.vue). А так же для верстки используется bootstrap(обычный которому нужен jquery, не bootstrap-vue)

Есть проблема. В одном из компонентов описывается таблица с классом .table-hover этот класс должен подсвечивать строку в таблице(tr при наведении) и как я понимаю это реализовано на jquery. все компоненты от vue а так же все js скрипты необходимые для работы bootstrap'а собираются в один общий js файл. И есть проблема. Т.к. таблица с классом .table-hover подгружается с помощью vue после загрузки страницы, то я столкнулся с проблемой, что класс .table-hover не обрабатывает наведение на строку в таблице. Хотя если попробовать эту же таблицу возвращать не из vue, а сразу вставить в php страницу, то все ок и класс .table-hover работает нормально. Подскажите пожалуйста можно ли как нибудь сделать так, что бы после того как vue вставляет таблицу на страницу, jquery заново вешал все свои обработчики событий на такие классы как например .table-hover. К сожалению проект уже большой и живет долго и перенести его на bootstrap-vue нет возможности

Answer 1

Подсветка строк в таблице определено в css правиле bootstrap и никакого отношения к jquery не имеет:

.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0,0,0,.075);
}

Зачем тут промежуточный tbody? Потому что теги tr могут быть вложены в теги thead и tfoot.

Браузер при парсинге DOM вставляет tbody, если тот не прописан явно. Если интересно, то смотрите спецификацию. По всей видимости, в таблицу, сгенерированную через javascript браузер не вставляет тег tbody и вышеприведенное правило css не отрабатывает.

Наглядный пример, без подключения jquery: вторая таблица находится в компоненте vuejs.

// Отключим ненужные для примера 
// сообщения в консоли. 
Vue.config.productionTip = false 
Vue.config.devtools = false 
 
const App = { 
  template: ` 
<table class="table table-striped table-hover table-bordered thead-light" id="pay_table"> 
  <tr><th>Имя</th><th>Покупка</th><th>Сумма</th><th></th></tr> 
  <tr> 
    <td><input type="text" class="form-control"></td> 
    <td><input type="text" class="form-control"></td> 
    <td><input type="text" class="form-control"></td> 
    <td><input type="button" class="btn btn-default" value="X" id="del_pay"></td> 
  </tr> 
</table>` 
} 
 
const app = new Vue({ 
  el: '#app', 
  components: { 
    App 
  }, 
  template: `<app></app>` 
})

<table class="table table-striped table-hover table-bordered thead-light" id="pay_table"> 
  <tr><th>Имя</th><th>Покупка</th><th>Сумма</th><th></th></tr> 
  <tr> 
    <td><input type="text" class="form-control"></td> 
    <td><input type="text" class="form-control"></td> 
    <td><input type="text" class="form-control"></td> 
    <td><input type="button" class="btn btn-default" value="X" id="del_pay"></td> 
  </tr> 
</table> 
 
<div id="app" v-cloak></div> 
 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>

Очевидное решение: начать прописывать tbody и считать его обязательным вложенным тегом в теге table.