1

質問があります。html テーブルを操作しようとしています。2 つのテーブルがあり、最初のテーブルの最初の行にカーソルを合わせると、両方のテーブルの両方の行が強調表示されます。

この単純な関数を作成する際に、解決策を見つけました。

<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5'; 
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}        
</script>

最初のテーブルには次のものがあります。

<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >

私が持っている2番目のテーブルで：

<tr id="row1" >

したがって、最初のテーブルの最初の行にマウスを合わせると、2 番目のテーブルの最初の行が強調表示されます。

私の質問は、特に動的テーブルの場合、すべての行を作成する方法です。私が明確だったことを願っています。

4

3 に答える 3

2

これをjQueryで実装しました。邪魔な JS を使用せず、行に追加の ID を必要としません。また、CSS クラスはインライン スタイルよりも好ましいです。

HTML:

<table id="t1">
    <tr><td>......</td></tr>
    <tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
    <tr><td>......</td></tr>
    <tr><td>......</td></tr>
</table>

CSS:

tr.active > td
{
    background-color:#f00;
}

JS:

$(function(){
    $("#t1 tr").hover(
        function(){
            $(this).addClass('active');
            $('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
        },
        function(){
            $(this).removeClass('active');
            $('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
        }
    );
});

これがライブフィドルです：http://jsfiddle.net/keaukraine/KBEhA/1/

于 2013-06-25T08:26:06.930 に答える
0

これには jQuery を使用できます。

.eq()および.index()関数を使用します。

それを行う方法：

HTML:

<table border="1">
    <tr>
        <td>Row1</td>
    </tr>
    <tr>
        <td>Row2</td>
    </tr>
    <tr>
        <td>Row3</td>
    </tr>
    <tr>
        <td>Row4</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td>Row1</td>
    </tr>
    <tr>
        <td>Row2</td>
    </tr>
    <tr>
        <td>Row3</td>
    </tr>    
</table>

JS:

$('table tr').hover(function()
{
    var index = $(this).index();
    $('table').each(function()
    {
        $(this).find('tr').eq(index).css('color', 'red');
    });
});

実際の例はここにあります。

于 2013-06-25T08:24:26.270 に答える