我在Ember中创建了一个表，当我将鼠标悬停在列的特定标题单元格上时，我想突出显示整个列。
我很容易做到了，但是有人告诉我这可能不是“余烬之路”。
是炭烬的新手，所以我要仔细检查。
HTML
Ember组件
\documentclass[12pt]{article}
\usepackage[letterpaper, % Choose paper size
left= 1.0in, % Set the margins
right= 1.0in,
top= 1.0in,
bottom=1.5in]{geometry}
\usepackage[english]{babel}
\usepackage[utf8]{inputenc} % Apostrophes and quotes need this
\usepackage{fancyhdr} % Needed for header and footer lines and colors
\usepackage{enumitem}
\usepackage{graphicx}
\usepackage{pythontex} % Allows for the inclusion of Python code
\usepackage{lastpage} % Needed for page numbering
\usepackage[dvipsnames]{xcolor} % Needed for the colors in the commands
\usepackage[font={scriptsize}]{caption}
\usepackage[retainorgcmds]{IEEEtrantools}
\usepackage{lipsum} % Random text
%---------------------------- New Packages ----------------------------------------------------------------------%
\usepackage{paracol} % Used for creating independent columns as well as page layout
\usepackage{float} % Allows to insert table/figure in the exact position by using the H parameter
\usepackage[none]{hyphenat} % No hyphenation
\usepackage{wrapfig} % Allows to wrap table/figure to span both left and right column
\definecolor{CustomOrange}{rgb}{1, 0.43529, 0.01176} % Define custom colors
\definecolor{CustomGrey}{rgb}{0.4745, 0.4745, 0.4745} % Define custom colors
%---------------------------- Header & Footer -------------------------------------------------------------------%
\pagestyle{fancy}
\fancyhf{}
\renewcommand{\headrulewidth}{1.0pt} % Thickness of header rule
\renewcommand{\headrule}{\hbox to\headwidth{\color{CustomOrange}\leaders\hrule height \headrulewidth\hfill}}
\renewcommand{\footrulewidth}{1pt} % Thickness of footer rule
\renewcommand{\footrule}{\hbox to\headwidth{\color{CustomOrange}\leaders\hrule height \headrulewidth\hfill}}
\fancyfoot[R]{Page \thepage\ of \pageref{LastPage}} % Page numbering
\setlength\headheight{60pt}
%---------------------------- Paragraph Style -------------------------------------------------------------------%
\setlength\parindent{0pt}% no indentation
% The two lines below used to set the space between paragraphs to 0.35cm
\setlength\parskip{0.35cm}
\setlength\parsep{\parskip}
%---------------------------- Set Columns -----------------------------------------------------------------------%
\setcolumnwidth{0.35\textwidth,0.65\textwidth} % Size of columns (col 1 and col 2) respectively
\setlength{\columnseprule}{1.0pt} % Thickness and color of vertical line between columns
\colseprulecolor{CustomGrey} % Color of the vertical line between columns
\setlength{\columnsep}{3em} % Size of the space between columns.
%---------------------------- Color of Document -----------------------------------------------------------------%
\backgroundcolor{c[0]}[RGB]{255, 186, 186} % Color of left column (light red)
\backgroundcolor{c[1]}[RGB]{186, 186, 255} % Color of right column (light blue)
\backgroundcolor{g}{yellow} % Color of space between the columns
\backgroundcolor{t}{green} % Color of top margin
\backgroundcolor{b}{purple} % Color of bottom margin
\backgroundcolor{l}{brown} % Color of left margin
\backgroundcolor{r}{orange} % Color of right margin
\backgroundcolor{p}{black} % Color of the space remaining when the columns don't span the whole page (IMPORTANT!)
%---------------------------- Miscellaneous --------------------------------------------------------------------%
% Paracol uses its own numbering of tables/figures, \globalcounter* allows to
% Use the default numbering that latex uses. It is needed because it will mess
% the numbering in your document.
\globalcounter*
% \printpythontex % You might need this??
%---------------------------- Begin Document---------------------------------------------------------------------%
\begin{document}
\begin{paracol}{2}
% We start at left column (column[0])
\sloppy
\textbf{Beginning of paragraph 1 (placed on the left column).} \lipsum[1] \textbf{End of paragraph 1.}
\begin{figure}[H]
\includegraphics[width=\linewidth]{example-image-a}
\caption{First figure in document and is placed in the first column (first figure in column 1).}
\end{figure}
% End of left column
\switchcolumn[1]
% Start at the right column (column[1])
\textbf{Beginning of paragraph 2 (placed on the right column).} \lipsum[2] \textbf{End of paragraph 2.}
\begin{figure}[H]
\includegraphics[width=\linewidth]{example-image-b}
\caption{Second figure in document and is placed in the second column (first figure in column 2).}
\end{figure}
% End of right column
\switchcolumn[0]
% Switch back to left column (column[0])
\textbf{Beginning of paragraph 3 (placed on the left column).} \lipsum[3] \textbf{End of paragraph 3.}
\begin{figure}[H]
\includegraphics[width=\linewidth]{example-image-c}
\caption{Third figure in document and is placed in the first column (second figure in column 1).}
\end{figure}
% End of left column
\switchcolumn[1]
% Switch to right column (column[1])
\textbf{Beginning of paragraph 4 (placed on the right column).} \lipsum[4] \textbf{End of paragraph 4.}
\begin{figure}[H]
\includegraphics[width=\linewidth]{example-image-a}
\caption{Fourth figure in document and is placed in the second column (second figure in column 2).}
\end{figure}
\textbf{Beginning of paragraph 5 (placed on the right column).} \lipsum[5] \textbf{End of paragraph 5.}
\begin{table}[H]% Try here, and then top
\centering
\begin{tabular}{ |c|c|c|c|c|c| }
\hline
cell1 & cell2 & cell3 & cell4 & cell5 & cell6 \\
cell1 & cell2 & cell3 & cell4 & cell5 & cell6 \\
cell1 & cell2 & cell3 & cell4 & cell5 & cell6 \\
\hline
\end{tabular}
\caption{The one and only table in the document. It is placed in column 2.}
\end{table}
% End of right column
\end{paracol}
\end{document}
有更好的方法吗？ 什么是余烬方式？
答案 0 :(得分：2)
如果您正在寻找“ Ember方式”，您要做的是使用一个在mouseEnter和mouseSet上设置属性的动作，使各个行和列都保持选中状态。
<th
{{action 'setHover' 'colId1' on="mouseEnter"}}
{{action 'removeHover' 'colId1' on="mouseLeave"}}>
Column 1 Header</th>
<th
{{action 'setHover' 'colId2' on="mouseEnter"}}
{{action 'removeHover' 'colId2' on="mouseLeave"}}>
Column 2 Header</th>
<th
{{action 'setHover' 'colId3' on="mouseEnter"}}
{{action 'removeHover' 'colId3' on="mouseLeave"}}>
Column 3 Header</th>
setHover将为列ID设置一个名为“ hoveredCol”的属性。
setHover(colId){
this.set('hoveredCol',colId);
}
removeHover将重置悬停的列。
removeHover(colId){
if (this.get('hoveredCol) === colId) {
this.set('hoveredCol',null);
}
}
在模板中，如果类已悬停，则将其添加到单元格中。
<tr>
<td {{if (eq hoveredCol 'colId1') 'hover'}}>Data 1</td>
<td {{if (eq hoveredCol 'colId2') 'hover'}}>Data 2</td>
<td {{if (eq hoveredCol 'colId3') 'hover'}}>Data 3</td>
</tr>
现在，当悬停列标题时，该行将获得将其标记为悬停的类。
在twiddle中可以看到一个粗略的示例（工作原理略有不同）。
答案 1 :(得分：1)
取决于您的余烬版本，您应该this.element。
其余的是香草javascript：）
因此，您可以执行以下操作：
this.element.classList.add('highlighted-block');
如果您想要一个子元素，则可以
this.element
.querySelector(someSelector)
.classList.add('highlighted-block');