показать/скрыть столбец столбца на мышином центре с динамическим div id

Question

У меня есть таблица, где я хочу показать последний столбец, только если столбец before завис. Данные таблицы обрабатываются 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> 

в приведенном выше примере кода работает, но я должен ссылаться на идентификатор, как «# hover_9242411» и «# hidden_9242411». часть после hover_/hidden_ ​​динамически добавляется в каждый столбец с циклом for. Как я могу динамически ссылаться на вторую часть (9242411)?

Answer 1

Рассмотрим модифицируя 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(); 
}); 

Fiddle

Answer 2

Если он всегда будет предыдущий столбец показ/скрытие next столбец, вы можете написать обработчики событий следующим образом:

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

Для этого примера вам нужно добавить класс в столбец hover (тот, который вы хотите навести, чтобы показать следующий столбец). Я также дал идентификатор таблице и назначил обработчик события, чтобы событие не должно было пузыриться до самого верха. Вот fiddle

Если позже вы обнаружите, что вы Арент показа/скрытия в следующей колонке, но каким-то другим, вы могли бы также поставить определенный класс на этой скрытой колонки и вместо того, чтобы использовать

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

вы можете использовать что-то вроде

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