当用户点击时试图突出显示表格中的一行答案

【问题标题】：Trying to highlight a row in a table when user clicks当用户点击时试图突出显示表格中的一行
【发布时间】：2014-04-19 01:31:08
【问题描述】：

我正在尝试从 JS Fiddle link 复制您上面的解决方案，但无法加载它。我错过了什么？

我正在尝试从这个question 实施解决方案。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style>

.table-striped  tr.highlight td { 
    background-color: blue;
    color:white;
}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$('#mytable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});
</script>
</head>

<body>
<table id="mytable" class="table-striped">
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
</table>
</body>
</html>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您的目标是：

tbody tr

但是 tbody 不存在于您的 html 中，因此从 jQuery 中删除 tbody 应该可以工作。

像这样：

$('#mytable').on('click', 'tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

【讨论】：

解释了为什么它可以在某些浏览器中工作，因为某些浏览器（由于 HTML 引擎错误更正）会自动插入 tbody。
这仍然不起作用，因为在创建 DOM 之前加载了 javascript。
不一定。这取决于 jQuery 的加载速度、事件处理程序的绑定以及 DOM 的准备情况。为确保这一点，请将事件包装在 $(function(){/*event handler*/}); 中。使用F5 与CTRL+F5 时通常会触发差异
@TimVermaelen 你知道为什么this 可以工作吗，因为它仍然使用“tbody tr”选择器。
可以将整个侦听器包装在一个 document.ready 函数及其防弹：)

【解决方案2】：

这个点击事件没有被触发，因为没有创建 DOM，因此 jQuery 找不到一个元素来绑定点击事件。您应该在正文的末尾加载您的 javascript，或者将您的 javascript 包装在窗口 onload 函数中。 FIDDLE

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style>

.table-striped  tr.highlight td { 
    background-color: blue;
    color:white;
}

</style>


</head>

<body>
<table id="mytable" class="table-striped">
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
</table>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$('#mytable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});
</script>
</body>
</html>

【讨论】：

这似乎已经通过将
是的，只需删除.siblings().removeClass('highlight')，该行将保持突出显示。要检查一个元素是否已经有一个类，您可以使用$(this).hassClass("highlight")，因此如果再次单击该行，您可以删除突出显示类。
效果很好，我仍在努力学习这一切。所以我写的是$('#leaderboard').on('click', 'tr', function(event) { $(this).addClass('highlight'); $(this).hasClass('highlight');
完美，这就是工作。学习所有这些的最佳教程网站是什么？我希望能够在页面用新数据刷新后保存点击的行

【解决方案3】：

你的 dom 中没有 tbody。使用

$('#mytable').on('click', 'tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

只需从点击事件中删除tbody。

【讨论】：