选择下一行后需要删除行突出显示

Question

当我单击下一个表格行时，我需要删除行突出显示。

当我使用以下代码时，单击齿轮图标中的菜单时，表格行会突出显示。然后，当我单击另一个表格行或齿轮图标时，现有的表格行突出显示不会被删除。任何人都可以为我提供有关如何解决此问题的建议。

click: function () {
label: 'Delete LMD Definition',
icon: 'delete',
$("table tbody").on("click", "tr", function () {
$("tr.selected")  // find any selected rows
.not(this)  // ignore the one that was clicked
.removeClass("selected");  // remove the selection
$(this).toggleClass("selected");  // toggle the selection clicked row
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ember18549" class="ember-view content-table focus-group object-table container-view highlighted">
<tbody>
<tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<td id="ember19010" class="ember-view lmdd-menu actions container-view">
<rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
</td>
<td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
</td>
</tr>
<tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<td id="ember19010" class="ember-view lmdd-menu actions container-view">
<rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
</td>
<td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
</td>
</tr>
</tbody>
</table>

Answer 1

如果您使用类和 css 规则，这将是非常简单的事情。 使用 CSS 悬停状态突出显示，并使用 clickc 添加/删除所选内容的类。

$("table tbody").on("click", "tr", function () {
$("tr.selected")  // find any selected rows
.not(this)  // ignore the one that was clicked
.removeClass("selected");  // remove the selection
$(this).toggleClass("selected");  // toggle the selection clicked row
})

table{
border-collapse: collapse;
}
table tbody td {
border: 1px solid black;
padding: 1em;
}
table tbody tr:hover {
background-color: #CCC;
cursor: pointer;
}
table tbody tr.selected {
background-color: #9999AA;
}
table tbody tr.selected:hover {
background-color: #BBB;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td><td>Pizza</td>
</tr>
<tr>
<td>2</td><td>Taco</td>
</tr>
<tr>
<td>3</td><td>Burger</td>
</tr>
<tr>
<td>4</td><td>Salad</td>
</tr>
</table>

Answer 2

这是纯粹的jQuery，我强烈建议不要这样做。如果可以的话，你应该使用余烬。但是，由于您已经为此使用了jQuery并且不显示余烬代码，因此这是您最容易修复的事情。

只需为状态添加一个 css 类即可。然后在所有其他行上使用removeClass，在焦点行上使用addClass。

$(function() {
$("table.content-table.highlighted tr.content-row").on("focusout", function() {
$('table.content-table.highlighted tr.content-row').removeClass('my-line');
$(this).addClass('my-line');
});
});

.my-line {
background: #FFFF99 none 0 0 repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="content-table highlighted">
<tbody>
<tr class="content-row" tabindex="0" aria-label="">
<td>
FOO
</td>
<td>
BAR
</td>
</tr>
<tr class=" content-row" tabindex="0" aria-label="">
<td>
BAZ
</td>
<td>
BAL
</td>
</tr>
</tbody>
</table>

Answer 3

尝试使用

$("table.content-table").click(function(){
$(this).toggleClass("highlighted");
});

每次单击此表时，都会添加或删除突出显示的类。

或者使用以下代码，以便在您单击的表被选中时取消选择每个表。

$("table.content-table").click(function(){
$("table.content-table").removeClass("highlighted");
$(this).addClass("highlighted");
});