0 
<table> 
<tr> 
<th>#</th> 
<th>Name</th> 
<th>Surname</th>
</tr> 

<tr onmouseover="ChangeColor(this, true);" 
onmouseout="ChangeColor(this, false);" 
onclick="DoNav('go.html');"> 

<td>1</td>
<td>John/td>
<td>Dump</td>
</tr> 
</table>

Javascript:

 function ChangeColor(tableRow, highLight)
        {if (highLight)
        {tableRow.style.backgroundColor = '#F5FFDB';}
        else
        {tableRow.style.backgroundColor = '';}}
 function DoNav(theUrl)
        {document.location.href = theUrl;}

次の構造を使用してテーブルを描画します。行にカーソルを合わせると背景が変わり、行をクリックするとどこでもURLにジャンプします。私がやろうとしているのは、<td>基本的に行内の特定の列に異なる動作をするように指示する ID 識別子 (おそらく に入る) を用意することです。つまり、これは私が探しているものです:

<table> 
<tr> 
<th>#</th> 
<th>Name</th> 
<th>Surname</th>
</tr>   
<tr> 
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr> 
</table>

何か案は？

編集:
言い忘れました... id="hover_go_style_1" は 1 つの URL に移動し、id="hover_go_style_2" は別の URL に移動します。それが「違い」です。現在は onClick を使用しているため、行全体で 1 つの URL に移動しますが、本質的にはセルを分離しようとしています。これをよりよく説明する方法がわからない。

4

1 に答える 1

3

ホバーカラーには CSS を使用する必要があります。CSS の方がはるかに簡単です。クリック イベントは、JavaScript で完全に接続して処理することもできます。data-urlURL を定義するために、(HTML5 互換の) 属性を行に追加しました。

jsフィドル

HTML

<table> 
<tr> 
<th>#</th> 
<th>Name</th> 
<th>Surname</th>
</tr>   
<tr data-url="go.html"> 
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr> 
</table>

JS

$('tr[data-url]').click(function () {
    window.location.href = $(this).attr('data-url');
});

CSS

tr:hover td {
    background-color:#F5FFDB;
}

/* Style the third column differently */
tr:hover td:nth-child(3) {
    background-color:#F00;
}
于 2013-04-04T08:13:55.970 に答える