在前端开发中，我们经常需要展示数据表格。为了让表格更易于阅读，我们通常会使用斑马线表格样式来让行之间有明显的区分。
但是当用户点击一行时，我们可能希望突出显示这行，以便用户更容易地看到他们正在查看哪些数据。今天，我将向您展示如何实现这种效果。
实现思路
我们可以使用JavaScript来实现这个功能。当用户单击表格行时，我们将从所有行中删除任何高亮，并将该行添加高亮效果。我们还需要确保我们的代码与表格的斑马线样式兼容，因为我们只想突出显示选定的行而不改变其样式。
我们需要遍历每一行并添加一个事件监听器，以便在单击时触发函数。然后我们需要编写一个函数来处理点击事件。
-- -------------------- ---- ------- ----- ---- - -------------------------------- ---------------- -- - ----------------------------- -------------- --- -------- -------------- - -- ------ --- -------- ---------- ----- --------------- - ---------------------------------------- --------------------------- -- ----------------------------------- -- --- --------- -- ------- --- -------------------------------- -
在这个例子中，我们首先使用 document.querySelectorAll() 方法选择所有 tr 元素，并使用 .forEach() 方法为每个元素添加一个 click 事件监听器。在 highlightRow() 函数中，我们先删除任何已经存在的高亮行，然后将 highlight 类添加到当前点击的行上。
接下来，我们需要确保这个代码与斑马线样式兼容。如果您使用了 CSS 样式规则为斑马线表格的奇数和偶数行指定了不同的背景颜色，则可以使用以下样式：
-- -------------------- ---- ------- ----------------- - ----------------- -------- - -------- - ----------------- ----- - ---------- - ----------------- ----- -
这个样式规则将使表格的奇数行具有浅灰色的背景颜色，鼠标悬停时会高亮显示，并且高亮行将带有黄色的背景颜色。这样，用户单击一行时，我们只是用高亮的颜色替换了它的默认斑马线样式。
示例代码
下面是一个完整的代码示例，演示如何实现突出显示表格行的效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ----- ------------
-------
-- ----- ------ --
----------------- -
----------------- --------
-
-- ----- --------- --
-------- -
----------------- -----
-
-- ----------- --- --
---------- -
----------------- -----
-
--------
-------
------
-------
-------
----
------------------
-----------------
------------
-----
--------
-------
----
-------------
------------
-----------
-----
----
-------------
------------
-----------
-----
----
------------
--------------
-----------
-----
--------
--------
--------
----- ---- - --------------------------------
---------------- -- -
----------------------------- --------------
---
-------- -------------- -
-- ------ --- -------- ----------
----- --------------- - ----------------------------------------
-----------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------