Ответ 1
Вы можете сделать это без javascript.
.sortable tr {
cursor: pointer;
}
Как изменить указатель курсора на ручку, когда моя мышь переходит на <tr>
в <table>
<table class="sortable" border-style:>
<tr>
<th class="tname">Name</th><th class="tage">Age</th>
</tr>
<tr><td class="tname">Jennifer</td><td class="tage">24</td></tr>
<tr><td class="tname">Kate</td><td class="tage">36</td></tr>
<tr><td class="tname">David</td><td class="tage">25</td></tr>
<tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>
Вы можете сделать это без javascript.
.sortable tr {
cursor: pointer;
}
Я немного искал стили bootstrap и нашел это:
[role=button]{cursor:pointer}
Итак, я предполагаю, что вы можете получить то, что хотите:
<span role="button">hi</span>
Самый простой способ, который я нашел, - добавить
style="cursor: pointer;"
к вашим тегам.
Добавьте cursor: pointer
в ваш css.
Используйте стиль cursor: pointer;
в CSS для элемента, который вы хотите, чтобы курсор изменился.
В вашем случае вы должны использовать (в вашем .css файле):
.sortable {
cursor: pointer;
}
Для совместимости с IE < 6 используйте этот стиль в следующем порядке:
.sortable:hover {
cursor: pointer;
cursor: hand;
}
Но помните, что IE < 7 поддерживает :hover
псевдокласс только с элементом <a>
.
Я добавил это в свой стиль .css для управления настройками курсора:
.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
Используйте свойство курсора CSS так:
<table class="sortable">
<tr>
<th class="tname">Name</th><th class="tage">Age</th>
</tr>
<tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
<tr><td class="tname">Kate</td><td class="tage">36</td></tr>
<tr><td class="tname">David</td><td class="tage">25</td></tr>
<tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>
Конечно, вы должны поместить стиль в свой CSS файл и применить его к классу.
Использование css
table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/
только для стандартного решения, описанного выше, но если вы используете datatables, вы должны переопределить параметры datatatables.css по умолчанию и добавить следующий код в пользовательский css. В коде ниже выбирается класс - класс, который я добавлен в datatables, как показано в html.
table.row-select.dataTable tbody td
{
cursor: pointer;
}
И вы, html, будете выглядеть ниже:
<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select" id="datatable"></table>