Javascript 使用动态div id在鼠标指针上显示/隐藏表列

我有一个表，仅当前一列悬停时，我才想显示最后一列。表数据是用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>

$（文档）.ready（函数（）{
var tag_id=$（'#tag_id_hidden'）.val（）；
$.getJSON（“/tags/get_who_taged/”+”{{{tag.tag_id}}}+”，函数（数据）{
var行=“”；
对于（变量i=0；i

---

在上面的示例中，代码正在运行，但我必须将id引用为“#hover_9242411”和“#hidden_9242411”。悬停\隐藏\后的零件将使用for循环动态添加到每列。如何动态引用第二部分（9242411）？

考虑将您的

悬停

单元格修改为如下内容：

'<td id="hover_' + data[i]["entity_id"] + '" class="hover-cell" data-target="#hidden_' + data[i]["entity_id"] + '">'

---

考虑将您的

悬停

单元格修改为如下内容：

'<td id="hover_' + data[i]["entity_id"] + '" class="hover-cell" data-target="#hidden_' + data[i]["entity_id"] + '">'

---

如果总是前一列显示/隐藏下一列，您可以这样编写事件处理程序

$('#mytable').on('mouseenter', 'td.hover-column', function(){
    $(this).next().show();
}).on('mouseleave', 'td.hover-column', function(){
    $(this).next().hide();
});

对于该示例，您需要将一个类添加到悬停列（为了显示下一列而要悬停在其上的类）。我还为表提供了一个id，并为其分配了事件处理程序，因此事件不必一直冒泡到顶部。 这是一个

如果稍后您发现您没有显示/隐藏下一列，而是显示/隐藏其他列，那么您也可以在该隐藏列上放置一个特定的类，而不是使用

$(this).next().show();

你可以用像这样的东西

$(this).closest('tr').find('td.hidden-column').show();

---

如果总是前一列显示/隐藏下一列，则可以这样编写事件处理程序

$('#mytable').on('mouseenter', 'td.hover-column', function(){
    $(this).next().show();
}).on('mouseleave', 'td.hover-column', function(){
    $(this).next().hide();
});

对于该示例，您需要将一个类添加到悬停列（为了显示下一列而要悬停在其上的类）。我还为表提供了一个id，并为其分配了事件处理程序，因此事件不必一直冒泡到顶部。 这是一个

如果稍后您发现您没有显示/隐藏下一列，而是显示/隐藏其他列，那么您也可以在该隐藏列上放置一个特定的类，而不是使用

$(this).next().show();

你可以用像这样的东西

$(this).closest('tr').find('td.hidden-column').show();