show/hide table column on mouseenter with dynamic div id

Question

I have a table where I want to show the last column only if the column before is hovered. The table data is parsed with 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>

in the example above the code is working but I have to reference the id as "#hover_9242411" and "#hidden_9242411". the part after hover_/hidden_ is dynamically added to each column with a for loop. How can I dynamically reference the second part (9242411)?

Answer 1

Consider modifying your hover cell to something like this:

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

You could then simply use:

$(document).on("mouseover", ".hover-cell", function() {
    var target = $(this).data('target');
    $(target).show();
});

Fiddle

Answer 2

If it will always be the previous column showing/hiding the next column, you could write your event handlers like this

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

For that example to work you would need to add a class to the hover column (the one that you want to hover over in order to show the next column). I also gave an id to the table and assigned the event handler to it so the event doesnt have to bubble all the way to the top. Here is a fiddle

If later on you find that you arent showing/hiding the NEXT column but some other one, you could also put a specific class on that hidden column and instead of using

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

you could use something like

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