1

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/

4

1 に答える 1

4

テーブル行で 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 よりもデータ属性で要素を見つけるのに少し時間がかかりますが、テーブルの行数が非常に多くない限り、気にすることはありません。データ属性を使用するのが最も簡単です。名前を 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 で次のようにすることができます。1 秒が長すぎる場合は、トランジションの長さを変更します。

.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;
}
于 2013-06-01T20:00:38.823 に答える