在html页面中滚动mysql表格内容[关闭]

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             | |                      |
-------------------------------------------

如果点击“ghi”，页面应如下所示：

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

我该怎么做？一个例子将不胜感激，因为我是这方面的新手。

Answer 1

您可以使用在@Jack 答案中准确显示的 CSS 来显示滚动条。但是，如果您想从 MySQL 获取数据，则需要使用 Ajax。您可以使用 PHP 或您喜欢的任何其他服务器端语言运行两个 MySQL 查询。一个查询将获取所有 ID 并使用任何自定义 HTML 数据属性将其插入，如下所示：

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

在您的第二个查询中，您可以在单击特定项目时使用 ID 从 MySQL 中获取数据。您可以在 Ajax 请求被点击时发送它。

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

Answer 2

你可以像这样制作一个 div：

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

CSS：

.container {
   overflow: auto;
 }