-3

<tr>そのテーブル行のテーブルデータ内にあるボタンにカーソルを合わせると、テーブル行の背景色（）を変更するCSS、JavaScript、またはHTML機能のいずれかで実装しようとしています<td>。CSSファイルを変更することで、ボタンにIDを割り当てることでボタンの背景色を簡単に変更できますが、テーブル行の背景をどこから変更すればよいかわかりません。私はこのウェブサイトで同様の解決策を見てきましたが、それらは十分に具体的ではありません（とにかく私が見つけたもの）。どんな助けでも大歓迎です。

4

5 に答える 5

3

jQuery：

$('table button').hover(function() {
    $(this).closest('tr').css('background-color', 'red');
});

あなたは本当にjQueryのドキュメントを読むのに少し時間を費やすべきです。

于 2013-03-14T02:13:44.637 に答える
2

まず、JavaScriptでテーブル内のすべてのボタンへの参照を取得する必要があります（すべてのボタンに同じ名前を付ける（他の要素を指定しない）場合、またはすべてを指定する場合はdocument.getElementsByTagName、すべてのボタンを取得できます）同じクラスのボタンの（他の要素はありません）。getElementsByNamegetElementsByClassName

// get all of the buttons in the table (I gave them all a class of tablebutton
var buttons = document.getElementsByClassName("tablebutton");

次に、ボタンの配列をループして、2つのイベントリスナーを追加する必要があります。1つはmouseover（ホバーオーバー）イベント用で、もう1つはmouseout（ホバーアウェイ）イベント用です。

for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    button.addEventListener("mouseover", highlightRow, false);
    button.addEventListener("mouseout", unHighlightRow, false);
}

これらのイベントリスナーでは、ボタンからテーブル行までDOMツリーを上に移動し、行の背景色を強調表示された色または「」に設定して色を削除する必要があります。

function highlightRow ()
{
    var row = this.parentNode.parentNode;
    row.style.backgroundColor = "red";
}

function unHighlightRow ()
{
    var row = this.parentNode.parentNode;
    row.style.backgroundColor = "";
}

（名前で関数を定義する代わりに、匿名関数を使用することもできます。

    button.addEventListener("mouseover", function () {
        ...your code here
    }, false);
    button.addEventListener("mouseout", function () {
        ...your code here
    }, false);

JSFiddle

于 2013-03-14T02:41:29.240 に答える
0

trのホバースタイルを変更してみましたか？

http://jsfiddle.net/x2pLV/

table {
    width: 100%;
}

tr:hover {
    background: orange;
}

<table>
    <tr>
        <td><input type="submit" /></td>
    </tr>
</table>
于 2013-03-14T02:20:22.800 に答える
0

私はjQueryがないという考えが好きでした、ここにフィドルがあります：

var allButtons = document.getElementsByTagName('button'); 
for(var i=0; i < allButtons.length; ++i) { 
    if(allButtons[i].getAttribute('class') == "hoverme") { 
        allButtons[i].onmouseover = function() { makerow(this, 'blue'); };
        allButtons[i].onmouseout = function() { makerow(this, 'yellow'); };
    }
}

function makerow(elem, color) { 
    elem.parentNode.parentNode.style.backgroundColor = color; 
}

コードはテーブルの構造に多少依存するため、たとえば次の添付ファイルを参照してください：http: //jsfiddle.net/JFd5T/

于 2013-03-14T02:54:30.420 に答える
0

行を離れるときにもハイライトを削除したいと思います。この場合、jQueryを使用する場合は、そのスタイルも削除する必要がありますが、ホバーオンとホバーオフの両方で1つのアクションを実行するだけです。

$("td.data").hover(
  function () {
    $(this).parent("tr").toggleClass("active");
 }

そして、そのクラスのスタイルをcssに追加します。

.active {
  background-color: pink;
}

変更をトリガーするセルまたは要素に一致するようにセレクターを微調整する必要がありますが、マークアップが表示されないため、正確に提供できません。上記のセレクターには、データセルのクラスデータがあります。

ところで、まだjQueryを使用していない場合は、Scottのような非jqueryソリューションが最適な方法であることに同意します。

于 2013-03-14T03:37:10.330 に答える