当我单击下一个表格行时,我需要删除行突出显示。
当我使用下面的代码时,单击齿轮图标中的菜单时,表行会突出显示。然后,当我单击另一个表行或齿轮图标时,现有表行突出显示不会被删除。任何人都可以向我提供有关如何解决此问题的建议吗?
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>
最佳答案
如果您使用类和 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>
关于javascript - 选择下一行后需要删除行突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52204260/