我有一个表格,我希望仅在前一列悬停时显示最后一列。表数据使用JSON进行解析。
<script type="text/javascript">
$( document ).ready(function() {
var tag_id = $('#tag_id_hidden').val();
$.getJSON("/tags/get_who_tagged/" + '{{tag.tag_id}}' + "/", function(data) {
var lines = '';
for (var i = 0; i < data.length; i++) {
lines += '<tr id="' + data[i]['entity_id'] + '">';
lines += '<td id="button_id"><button id="prefix_' + data[i]["entity_id"] + '" class="js-programmatic-set-val" value="' + data[i]["entity_id"] + '" name="' + data[i]["title"] + '"><i class="fa fa-plus"></i></button></td>';
lines += '<td><a href="/entities/' + data[i]['entity_id'] + '/' + data[i]['slug'] + '/" class="user_link">' + data[i]['title'] + '</a></td>';
lines += '<td id="hover_' + data[i]["entity_id"] + '">' + data[i]['count'] + '</td>';
lines += '<td id="hidden_' + data[i]["entity_id"] + '" style="display:none;">'
for (var j = 0; j < data[i]['usernames'].length; j++) {
lines += data[i]['usernames'][j]['username'] + ', '
}
lines += '</td>';
lines += '</tr>';
//$("#count_user_table").empty();
$('#count_user_table tbody').html(lines);
}
});
});
</script>
<script>
$(document).on("mouseenter", "#hover_9242411", function() {$("#hidden_9242411").show();
});
$(document).on("mouseleave", "#hover_9242411", function() {$("#hidden_9242411").hide();
});
</script>
在上面的示例中,代码正在运行,但我必须将id引用为&#34;#hover_9242411&#34;和&#34;#hidden_9242411&#34;。 hover_ / hidden_之后的部分通过for循环动态添加到每个列。如何动态引用第二部分(9242411)?
答案 0 :(得分:2)
考虑将hover
单元格修改为以下内容:
'<td id="hover_' + data[i]["entity_id"] + '" class="hover-cell" data-target="#hidden_' + data[i]["entity_id"] + '">'
然后你可以简单地使用:
$(document).on("mouseover", ".hover-cell", function() {
var target = $(this).data('target');
$(target).show();
});
答案 1 :(得分:1)
如果它始终是显示/隐藏 next 列的上一列,您可以编写像这样的事件处理程序
$('#mytable').on('mouseenter', 'td.hover-column', function(){
$(this).next().show();
}).on('mouseleave', 'td.hover-column', function(){
$(this).next().hide();
});
要使该示例正常工作,您需要向悬停列添加一个类(您希望将鼠标悬停在该列上以显示下一列)。我还给表提供了一个id并为其分配了事件处理程序,因此事件不必一直冒泡到顶部。 这是fiddle
如果稍后你发现你没有显示/隐藏NEXT列而是另外一列,你也可以在该隐藏列上放置一个特定的类而不是使用
$(this).next().show();
你可以使用像
这样的东西$(this).closest('tr').find('td.hidden-column').show();