Как вы ищете таблицу для определения слова в jQuery?

Question

Это немного сложно объяснить, но у меня есть HTML-таблица, полная определений SQL, которые много говорят друг с другом. Например, кто-то говорит об «операторах INSERT» и упоминает «уникальный ключ». Еще один из рядов говорит об уникальных ключах.

Я бы хотел создать небольшой пузырь определения (когда вы наводите курсор на «уникальный ключ» в строке INSERT) с определением из соответствующей строки. Я планировал использовать jQuery, но я открыт для альтернатив. Есть идеи?

ОБНОВЛЕНИЕ : Мой код здесь

Answer 1

Есть несколько плагинов для всплывающих подсказок jQuery (это действительно то, что вам нужно). Лично я использовал jQuery Tooltip и доволен им. Я использовал его, чтобы поместить довольно сложный контент во всплывающую подсказку.

Я не совсем понимаю остальную часть вашего вопроса. Вы хотите, чтобы это произошло автоматически? Таблица присутствует на странице? Создает ли код на стороне сервера пузыри определения?

Теперь у jQuery Tooltip есть атрибут bodyHandler, в котором вы можете указать функцию обратного вызова (функцию), которая определит содержание подсказки, чтобы бит был в порядке. Хотите ли вы, чтобы эти ссылки / советы создавались автоматически?

РЕДАКТИРОВАТЬ: Взгляните также на этот выделить плагин . Даже если вы не используете его, вы можете скопировать методы поиска текста в документе и обернуть элементы вокруг них. Что-то вроде:

$(function() {
  $("table.definitions th").each(function() {
    var term = $(this).text();
    var definition = $(this).nextSibling().text(); // assuming it's in a <td> in the same row
    // find all occurrences of 'term' in relevant text block
    // and wrap in <span class="term" title="definition">...</span>
  });
});

Затем оптически используйте jQuery Tooltip, чтобы сделать из этого заголовка более современную подсказку.

Answer 2

Вместо переноса в span, как предложил @jason, я бы предложил использовать теги или для разметки выбранных вами слов.

В любом случае, вы могли бы тогда сделать что-то , как это.

Я оставлю настройку всплывающей подсказки для вас.

Javascript

$(document).ready(function() {
    $('acronym').hover(function(){
        var text = $('#definition_'+$(this).attr('title')).text();
        console.log(text);  
        $('#cbfsettinguptooltip').text(text)
        });


});

HTML

<table border="1" cellspacing="0" cellpadding="5">

    <tr>
        <td >Insert</td>
        <td id="definition_insert">The insert statement is better than the <acronym title="select">select</acronym> statement</td>
    </tr>
    <tr>        
        <td >Select</td>
        <td id="definition_select">No No Select is best, much better than <acronym title="insert">insert</acronym></td>
    </tr>
</table>

<div id="cbfsettinguptooltip">

</div>

Answer 3

вместо непосредственного анализа HTML, возможно, вы можете дать каждому <tr/> идентификатор, который можно использовать для поиска определения. и наоборот, если вы хотите больше контролировать, какой текст вызывает пузырь, оберните слова в <span /> с идентификатором.

JT

Answer 4

jQuery должен отлично работать для этой задачи. Сохраните значение пузырька определения где-то вне поля зрения и используйте jQuery, чтобы всплыть, когда вы наводите курсор.