прокрутки содержимого MySQL таблицы в HTML-страницу

Question

У меня есть таблица в базе данных MySQL, как это:

----------------------------------- 
|ID |Word | Meaning | Synonyms | 
----------------------------------- 
|1 |abc |xyxy  |abcxyxy  | 
|2 |def |yzyz  |defyzyz  | 
|3 |ghi |zxzx  |ghizxzx  | 
----------------------------------- 

В таблице есть около 1500 строк. Я хочу отобразить содержимое столбца «Word» в окне прокрутки, и, если я нажму на строки этого окна прокрутки, это должно означать смысл и синонимы. Например:

--------------------------------------- 
|abc   |^|      |         
|def   | |      | 
|ghi   | |      | 
--------------------------------------- 

Здесь на левой стороне находится шкала прокрутки. Опять же в поле прокрутки есть много предметов. Теперь, если я нажимаю на «DEF» в поле прокрутки страницы должен выглядеть следующим образом:

------------------------------------------- 
|abc    |^| Meaning: yzyz  |         
|def(Highlighted)| | Synonyms: defyzyz | 
|ghi    | |      | 
------------------------------------------- 

если нажал на «ГХИ» страница должна выглядеть следующим образом:

------------------------------------------- 
|abc    |^| Meaning: zxzx  |         
|def    | | Synonyms: ghizxzx | 
|ghi(Highlighted)| |      | 
------------------------------------------- 

Как я могу сделать это? Пример будет оценен, поскольку я новичок в этом.

Answer 1

Вы можете сделать DIV так:

<div class="container"> 
    <!-- mysql content --> 
</div> 

Css:

.container { 
    overflow: auto; 
} 

Answer 2

Вы можете показать полосу прокрутки с помощью CSS, который показывает точно в ответ @Jack. Однако, если вы хотите получить данные из MySQL, вам нужно использовать Ajax. Вы можете запустить два запроса MySQL с помощью PHP или любых других серверных языков, которые вы предпочитаете. Один запрос будет получать все ID и вставить его с помощью любого атрибута данных пользовательских HTML, как это:

<li data-id="1"></li> 
<li data-id="2"></li> 
<li data-id="3"></li> 

А на втором запросе вы можете получить данные из MySQL с помощью идентификатора, когда конкретный элемент щелкнул. Вы можете отправить запрос Ajax, когда он будет нажат.

$('li').click(function() { 
    // Fetch the data-id value for particular item when clicked 
    // Run an Ajax request to fetch the MySQL data 
});