0

現時点では、かなり基本的なテーブルがあります。

ここに画像の説明を入力

各列の 1 つの行のみを強調表示し、その前に選択されていたものをすべて選択解除できるようにする必要があります..

CSSクラスが必要になることは理解しています。

 .hightlighted {
 background: #f00;
 color: #fff;
 }

ビューの HTML も非常に基本的なものです。

<tbody>
<tr>
<td> </td>
<td>Differdange</td>
<td> </td>
</tr>       
    <tr>
<td> </td>
<td>Dippach</td>
<td> </td>
    </tr>
<tr>
<td> </td>
<td>Dudelange</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Echternach</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>Erpelscheid</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Alzette</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Sûre</td>
<td> </td>
</tr>
    <tr>
<td> </td>
<td>Ettelbruck</td>
<td> </td>
</tr>
    <tr>
<td> </td>
<td>Feulen</td>
<td> </td>
</tr>
</tbody

しかし、ユーザーがテーブルを完成させたときに行から選択したデータを「取得」する必要がある場合、CSS で行を強調表示/非強調表示することが適切かどうかわかりません。

後でデータを取得できるように、列の行を強調表示するために何を使用する必要があるか(JQuery、Javascript、CSS)を提案できますか?

編集

これで、強調表示がソートされました。唯一の問題は、列を区別して、これの代わりに (atm を取得しています)

ここに画像の説明を入力

各列で独自の行を強調表示できるようにしたい (たとえば、Differdange を強調表示したり、地域の dddd を強調表示したりできます)。

任意の編集方法

$("tr").click(function() {
$("tr").removeClass("highlighted");
$(this).addClass("highlighted");
});

これを行うコード？ありがとう

4

3 に答える 3

5

.removeClass()および.addClass()jQuery メソッドを使用してこれを実現できます。ここに小さなデモがあります: little link . コードは一目瞭然ですが、JavaScript 部分のコメント付きバージョンを次に示します。

var chosen = []; //an array to save the chosen row for each column
$("td").click(function() { //when a td is clicked
    var idx = $(this).index() + 1; //get column of current cell
    $("td:nth-child(" + idx + ")").removeClass("highlighted"); //unhighlight all cells in column
    $(this).addClass("highlighted"); //highlight this one
    chosen[idx] = $(this).parent("tr").index(); //and save it as chosen in its column
});
于 2012-09-13T11:09:04.120 に答える
2

............................ デモ

こんにちは今、あなたはこのようにこのjqueryを行うことができます

Css

    .hightlighted{
 background: #f00;
 color: #fff;
 }

jquery

$("tr").click(function(){

    $("tr").removeClass('hightlighted')
         $(this).addClass('hightlighted');


});
于 2012-09-13T11:07:54.560 に答える
0

いつ、どのように選択を行うべきかについて、より正確に教えていただけますか? ユーザーに行をクリックしてもらいたいと思います。行は強調表示されます。その場合、css でハイライト クラスを作成し、それをユーザーがクリックした行に追加すると、後で行 cia のクラスを取得できます。

tr.highlighted td {
    background: #f0;
    color: #fff;
}

そしてJavaScriptで：

// catch click event
$('tr').click(function (e) {
    // remove prvious selection
    $('tr.highlighted').removeClass('highlighted');
    // make this row selected
    $(e.currentTarget).addClass('highlighted');
});

// get current selection
function getSelected () {
    return $('tr.highlighted');
}
于 2012-09-13T11:09:15.537 に答える