我试图在鼠标悬停时突出显示表格行.每行(tr)已经具有"偶数"或"奇数"类.因此,要突出显示鼠标悬停时的行,我需要先从行中删除CSS类"偶数"或"奇数".请仔细阅读我的剧本:
$('tr').hover(function() {
if ($('this').hasClass('even')) {
$(this).removeClass('even');
$(this).addClass('rowhover');
}
else {
$(this).removeClass('odd');
$(this).addClass('rowhover');
}
},
function() {
$(this).removeClass('rowhover');
});
但是,它不起作用.你能指出我的错误吗？谢谢.
更新1:
我用这个toggleClass这个
$("tr").hover(function() {
$(this).toggleClass("rowhover");
});
然后我使用firebug来检查元素,tr得到了这样的类:
<tr class="even rowhover"> where it should be <tr class="rowhover">
如果我使用这样的结果,结果相同:
$('tr').hover(function() {
$(this).addClass('rowhover');
},
function() {
$(this).removeClass('rowhover');
});
我的用于rowhover类的CSS
.rowhover {background:green !important;}
更新2:
我试过贾斯汀约翰逊的建议:
$('tr').hover(function() {
$(this).removeClass('even odd').addClass('rowhover');
},
function() {
$(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
});
我用FireBug检查了元素,结果如下:
//Notice the space in the class=" rowhover" when mouse hover
<tr …我正在写一段代码让用户创建和维护联系人列表.联系人列在表格中,第一个单元格是一个复选框,如果此联系人已在此联系人列表中,则会选中该复选框.
我正在使用tablesorterpager插件,因此用户可以轻松浏览联系人列表; 我有一个自定义解析器用于复选框字段,它将根据是否选中复选框对联系人进行排序.
我的问题是我不能同时使这两个工作.
相关代码是这样的:
$(function() {
$('#userTable')
.tablesorter({
headers: {
0: {
sorter: 'checkbox'
}
}
})
.tablesorterPager({container: $("#pager")});
});
如果我注释掉.tablesorter调用或.tablesorterPager调用,那么另一个工作正常.如果我让他们都没有注释,那么只有第二个调用实际上有效 - 似乎我可以有分页或自定义解析器,但不是两者.我已经交换了两个电话,而且它一直是第二个电话 - 第一个消失了.
我认为我错过了一些明显的东西,但我找不到什么.这两个电话本身都很好,因为它们在另一个被注释掉时起作用,但是它们不能一起工作.
我正在使用tablesorter 2.1.19(从这里开始); 和jquery 1.7.1
我如何在Calendarorter中实现日期选择器,以便在日期之间显示结果01/01/2001 - 01/01/2012？
因为我对上述问题的疑问,我得到了以下问题:
在HTML中显示一组表格数据,其中数据包含日期.实现过滤表格数据的日期选择器.在可能的情况下,允许通过ajax或json提要提供表格数据.
Tablesorter不是以某种方式接受.addParser.我收到错误"undefined is not a function".这是我的代码:
$('mytable').tablesorter({
sortList: [[0,0]],
sortRestart: true,
initialized: function(table) {
var currentTable = $(table);
var startcol = currentTable.data("startcol");
if (startcol) {
var sorting = [[startcol, 0]];
currentTable.trigger("sorton", [sorting]);
}
},
headers:
{
4: { sorter: 'customparse' },
5: { sorter: 'customparse' }
}
}).addParser({
id: 'customparse',
is: function (s) {
return false;
},
format: function (s) {
console.log(s);
return s.replace(/\s+/g, '').replace(/,/g, '.');
},
type: 'numeric'
});
我发现了一些其他相关的问题,无法找到我的问题..我很怀疑jQuery不包含两次.它没有addPareser工作正常甚至认为我使用的jQuery版本是1.11.但我尝试更新到2.1版但没有变化..
我发错了吗？我究竟做错了什么..
看看这篇文章,我创建了一个类(t1),以便将表正确放置在移动设备上.像这样:
/*
Label the data
*/
.t1 td:nth-of-type(1):before { content: "Name"; }
.t1 td:nth-of-type(2):before { content: "Category A"; }
.t1 td:nth-of-type(3):before { content: "Category B"; }
.t1 td:nth-of-type(4):before { content: "Category C"; }
.t2 td:nth-of-type(1):before { content: "Name"; }
.t2 td:nth-of-type(2):before { content: "Category X"; }
.t2 td:nth-of-type(3):before { content: "Category Y"; }
.t2 td:nth-of-type(4):before { content: "Category Z"; }
我还从这个网站添加了一个表格分类器,分拣机也正常工作.分拣机已经有一个类(tablesorter)
当我使用以下内容时,由于t1类,表格在移动设备上正确定位
<table id="table1" class="t1" width="100%" border="1" >
当我使用以下内容时,由于tablesorter类,表正在排序
<table id="table1" class="tablesorter" …我想按升序和降序对表进行排序。基本上，当我单击 fa-sort-asc 时，它应该突出显示，而 fa-sort-desc 应该显示为灰色，反之亦然。请帮助我如何在 Bootstrap 4 中实现这一点。有一些示例，但是当 ASC 排序完成时，向下箭头丢失了。
我也尝试过使用数据表，但没有运气。请帮助我需要添加什么才能使用颜色突出显示进行排序
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
<script src="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js">
</script>
</head>
<body>
<div class="container">
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">ID
</th>
<th class="th-sm">Age
</th>
<th class="th-sm">Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>19</td>
<td>Germany</td>
</tr>
<tr>
<td>20</td>
<td>23</td>
<td>San Franisco</td>
</tr>
<tr>
<td>7</td>
<td>28</td>
<td>London</td>
</tr> …tablesorter ×6
jquery ×4
javascript ×3
css ×2
bootstrap-4 ×1
class ×1
datatables ×1
datepicker ×1
html-table ×1