3

HTMLテーブル列に純粋なJavascript（jQueryなし）のホバー効果が必要です。

Firefoxの修正が含まれていると思われるこれを見つけましたが、それでも壊れているように見えます。

私はこれが最初の列でのみ機能することを発見しました。

残念ながら、私のJavascriptスキルはせいぜいアマチュアなので、これらのいずれかを変更しようとしても無駄であることがわかりました。

これは可能ですか？任意の提案をいただければ幸いです。

4

7 に答える 7

7

これが列ベースのアプローチです。マウスがセルに出入りするときに、対応<col/>するインデックスを見つけて、目的のクラスを適用/削除します。

(() => {
  const myTable = document.getElementById("myTable");
  const cols = myTable.querySelectorAll("col");
  const events = {
    mouseover: e => {
      const t = e.target.closest("td");
      if (t) {
        const cellIndex = t.cellIndex;
        for (let i = 0, n = cols.length; i < n; i++) {
          cols[i].classList[i === cellIndex ? "add" : "remove"]("hovered");
        }
      }
    },
    mouseout: e => {
      const t = e.target;
      if (t.nodeName === "TD" && !t.contains(e.relatedTarget)) {
        cols[t.cellIndex].classList.remove("hovered");
      }
    }
  };
  for (let event in events) {
    myTable.addEventListener(event, events[event]);
  }
})();
.hovered {
  background-color: #FF0000;
}
<table id="myTable" cellspacing="0">
  <col />
  <col />
  <col />
  <tbody>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2
        <span>nested</span>
      </td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
  </tbody>
</table>

参照：

于 2012-08-15T19:25:34.940 に答える
2

コードは次のとおりです（+デモ）：

var HOVER_CLASS = 'hovered';
var hovered;

table.addEventListener('mouseover', function (e) {
    if (e.target.tagName.toLowerCase() == 'td') {
        var index = e.target.cellIndex;

        hovered && hovered.forEach(function (cell) {
            cell.classList.remove(HOVER_CLASS);
        });

        hovered = Array.prototype.map.call(
            table.rows,
            function (row) {
                var i = index;
                while (!cell && i >= 0) {
                    var cell = row.cells[i];
                    i -= 1;
                }
                return cell;
            }
        );

        hovered.forEach(function (cell) {
            cell.classList.add(HOVER_CLASS);
        });
    }
}, true);

table.addEventListener('mouseout', function (e) {
    hovered && hovered.forEach(function (cell) {
        cell.classList.remove(HOVER_CLASS);
    });
    hovered = null;
}, true);
于 2012-08-15T19:15:20.417 に答える
1

私が考えることができる最善の方法は、それぞれ<td>に、その列が含まれる列を識別するクラス名を付けることです。つまり、「col1、col2など」です。

document.getElementsByClassName("colX")次に、関数を使用してそれら<td>の配列を取得し、配列をループしてスタイルを変更できます。警告、これはgetElementsByClassName関数を持たない古いブラウザでは機能しない可能性がありますが、そのための回避策を簡単に見つけることができます。その中で最も良いのはjQueryを使用することですが、なぜそれに反対するのかわかりません。

于 2012-08-15T18:58:43.617 に答える
0

cssでクラスを作成します

.HoverTabla > tbody > tr:hover,
.HoverTabla > tbody > tr:focus { 
    background-color: #42C6F7;
}

次に、htmlのテーブルから呼び出します

<table class="table HoverTabla" id="tbl_Plan">

            <thead>
                <tr>
                    <th>Tipo de plan</th>
                    <th>Tiempo en días</th>
                    <th>Max. Usuario</th>
                    <th>Max. Capacidad</th>
                    <th>Max. Casos</th>
                    <th>Valor plan</th>
                    <th></th>
                </tr>
            </thead>
 </table>
于 2019-03-27T21:39:06.040 に答える
0

少しグーグルした後に見つけたCSSのみの回答：https ：//css-tricks.com/simple-css-row-column-highlighting/

テーブル内の各セル（<td>）には、ホバー効果を作成するために使用される疑似要素を介したパディングが与えられます。ホバー効果がテーブル自体よりも拡張されないようにするために、overflow: hiddenが使用されます。

記事のサブタイトルはそれをすべて要約しています：「トリックは<td>、テーブルオーバーフローによって隠されたsで巨大な疑似要素を使用することです」

于 2019-11-25T21:36:01.940 に答える
-1

試す

<td onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">
于 2012-08-15T18:59:26.027 に答える
-2

これは機能します。JavaScriptは必要ありません。したがって、JavaScriptをオフにしても機能するはずです。

Jfiddle： http: //jsfiddle.net/vJacZ/

</ p>

HTML：

​&lt;table>
<tr>
    <td class="column1">
        Column1
    </td>
    <td class="column2">
        Column2
    </td>
</tr>
</table>

Css：

.column1{
    color:black;
}
.column1:hover{
    color:red;
}
.column2{
    color:black;
}
.column2:hover{
    color:green;
}
于 2012-08-15T19:00:31.237 に答える