使用锚点使用JQuery/Bootstrap突出显示表中的一行
我正在使用引导Twitter和JQuery。我有一个包含一些数据的表,每行都有一个id。我有一个typeahead来搜索表中的数据。当我在typeahead中选择一个数据时,我想突出显示正确的行,这就是我使用锚定的原因。但是,我不知道如何突出这一行 这里是我的JQuery代码:使用锚点使用JQuery/Bootstrap突出显示表中的一行,jquery,twitter-bootstrap,anchor,highlight,bootstrap-typeahead,Jquery,Twitter Bootstrap,Anchor,Highlight,Bootstrap Typeahead,我正在使用引导Twitter和JQuery。我有一个包含一些数据的表,每行都有一个id。我有一个typeahead来搜索表中的数据。当我在typeahead中选择一个数据时,我想突出显示正确的行,这就是我使用锚定的原因。但是,我不知道如何突出这一行 这里是我的JQuery代码: $(document).ready(function() { $('#typeahead').change(function() { window.location = "#" + $(this)
$(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>
下面是typeahead的代码:
<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].'",';
}
?>]'>
此处显示了typeahead数组的内容:
<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"]'>
下面是介绍我的问题的示例代码:不要在表行上使用id属性,而是将其更改为data name。例如:
<tr data-name="Christophe Chantraine">
<td>A</td>
<td>B</td>
</tr>
然后将jQuery代码更改为:
$(document).ready(function() {
$('#typeahead').change(function() {
window.location = "#" + $(this).val();
//highlighting the row...
$('tr[data-name="' + $(this).val() + '"]').addClass('selected');
});
});
通过数据属性查找元素所需的时间比通过id查找元素所需的时间稍长,但除非您有大量的表行,否则不会引起注意。使用数据属性是最容易的,因为您必须对名称进行段塞,才能将其用作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>
要添加过渡效果,可以在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;
}
不要在表行上使用id属性,而是将其改为data name。例如:
<tr data-name="Christophe Chantraine">
<td>A</td>
<td>B</td>
</tr>
然后将jQuery代码更改为:
$(document).ready(function() {
$('#typeahead').change(function() {
window.location = "#" + $(this).val();
//highlighting the row...
$('tr[data-name="' + $(this).val() + '"]').addClass('selected');
});
});
通过数据属性查找元素所需的时间比通过id查找元素所需的时间稍长,但除非您有大量的表行,否则不会引起注意。使用数据属性是最容易的,因为您必须对名称进行段塞,才能将其用作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>
要添加过渡效果,可以在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;
}
我试过了,但没用。我在前面加上了我打字的代码。谢谢你的帮助!事实上,我必须选择tr,其中id=$this.val;但我不知道怎么。。。我正在搜索…您如何选择tr可能取决于td内容是否与typeahead结果完全匹配,因此您应该发布$typeahead数组,事实上,typeahead中选择的名称与我表中的id完全相同。所以,像这样的:……现在它开始清晰了!问题是id属性中不能有空格或特殊字符。它们只能有字母、数字、下划线、连字符、冒号和句点,并且必须以字母开头。我会用我认为最简单的解决方案更新我的答案。我试过了,但没用。我在前面加上了我打字的代码。谢谢你的帮助!事实上,我必须选择tr,其中id=$this.val;但我不知道怎么。。。我正在搜索…您如何选择tr可能取决于td内容是否与typeahead结果完全匹配,因此您应该发布$typeahead数组,事实上,typeahead中选择的名称与我表中的id完全相同。所以,像这样的:……现在它开始清晰了!问题是id属性中不能有空格或特殊字符。它们只能有字母、数字、下划线、连字符、冒号和句点,并且必须以字母开头。我将用我认为最简单的解决方案更新上面的答案。你能发布$typeahead数组的内容吗?你能发布$typeahead数组的内容吗?