使用锚点使用 JQuery / Bootstrap 突出显示表格的一行

Question

我正在使用 Bootstrap (Twitter) 和 JQuery。我有一个包含一些数据的表，每一行都有一个 id。我有一个预先输入来在我的表中搜索数据。当我在预输入中选择数据时，我想突出显示正确的行，这就是我使用锚点的原因。但是，我不知道如何突出显示该行。

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

Answer 1

不要在表格行上使用 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>

当你链接到行时，你的锚点也需要有下划线：

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