滚动html页面中的mysql表内容

scroll mysql table contents in html page

本文关键字：mysql html 滚动      更新时间：2023-09-26

我在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)| |                      |
-------------------------------------------

我该怎么做？举个例子会很感激，因为我是这方面的新手。

您可以使用CSS来显示滚动条，该CSS正好显示在@Jack答案中。但是，如果您想从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
});

您可以制作这样的div：

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

Css:

.container {
   overflow: auto;
 }
相关文章：