我正在使用 Bootstrap (Twitter) 和 JQuery。我有一个包含一些数据的表,每一行都有一个 id。我有一个预输入功能来搜索表中的数据。当我在预输入中选择数据时,我想突出显示正确的行,这就是我使用 anchor 的原因。但是,我不知道如何突出显示该行。
这是我的 JQuery 代码:
$(document).ready(function() {
$('#typeahead').change(function() {
window.location = "#" + $(this).val();
//highlighting the row...
});
});
此 HTML 代码仅用于测试:
<a href="#row1">Row1</a>
<a href="#row2">Row2</a>
<table class="table table-hover table-bordered">
<tr id="row1">
<td>A</td>
<td>B</td>
</tr>
<tr id="row2">
<td>C</td>
<td>D</td>
</tr>
</table>
这里是预先输入的代码:
<input type="text" id="typeahead" data-provide="typeahead" placeholder="Search a name" data-items="4" data-source='[
<?php for($i = 0 ; $i < count($typeahead) ; $i++) {
if($i+1 == count($typeahead))
echo '"'.$typeahead[$i].'"';
else
echo '"'.$typeahead[$i].'",';
}
?>]'>
这里是预先输入数组的内容:
<input type="text" id="typeahead" data-provide="typeahead" placeholder="Search a name" data-items="4" data-source='["Christophe Chantraine","Toto Tuteur","Henris Michaux","Robert Patinson","Benjamin Brégnard","Jean-Charles Terzis","Ludovic Dermience","Claude Dianga"]'>
这是一个示例代码来介绍我的问题:http://jsfiddle.net/TK7QP/6/
最佳答案
不要在表行上使用 id 属性,而是将其更改为 data-name。示例:
<tr data-name="Christophe Chantraine">
<td>A</td>
<td>B</td>
</tr>
将此 CSS 添加到您的样式表中:
.table-hover tbody tr.selected > td {
background-color: #f5f5f5;
}
然后将 jQuery 代码更改为:
$(document).ready(function() {
$('#typeahead').change(function() {
window.location = "#" + $(this).val();
//highlighting the row...
$('tr[data-name="' + $(this).val() + '"]').addClass('selected');
});
});
通过数据属性查找元素所需的时间比通过 id 查找元素的时间稍长,但除非表行数非常多,否则不会引起注意。使用数据属性是最简单的,因为您必须“slugify”名称才能将它们用作 id,这意味着删除所有空格、特殊字符等。
----使用 id 属性的替代答案,以便您可以链接到表行----
为此,您需要替换名称中的空格。以下是如何使用 PHP 执行此操作的示例:
<table class="table table-hover table-bordered">
<tr id="<?php echo str_replace(' ', '_', 'Christophe Chantraine');?>">
<td>A</td>
<td>B</td>
</tr>
<tr id="<?php echo str_replace(' ', '_', 'Benjamin Brégnard');?>">
<td>C</td>
<td>D</td>
</tr>
</table>
当您链接到行时,您的 anchor 还需要有下划线:
<a href="#Christophe_Chantraine">Christophe Chantraine</a>
那么你的 jQuery 应该如下所示:
$(document).ready(function() {
$('#typeahead').change(function() {
$('tr').removeClass('selected'); // remove class from other rows
$('#' + $(this).val().replace(' ', '_')).addClass('selected');
window.location = "#" + $(this).val().replace(' ', '_');
});
});
要添加过渡效果,您可以在 CSS 中执行类似的操作。如果一秒太长,请更改过渡长度:
.table-hover tbody tr.selected > td {
background-color: #f5f5f5;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
-o-transition: background 1s linear;
transition: background 1s linear;
}
关于jquery - 使用 JQuery/Bootstrap 使用 anchor 突出显示表格的一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16876386/