尝试在用户单击时突出显示表中的一行

debugcn 发表于 Dev

艾伦

我正在尝试从JS 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>

<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>

bobthedeveloper

由于未创建DOM，因此甚至没有触发此点击，因此jQuery找不到绑定click事件的元素。您应该在正文末尾加载javascript或将javascript包装在window onload函数中。小提琴

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。