Question

我在MySQL数据库中有一个像这样的表：

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

该表有大约1500行。我想显示列＆＃34; Word＆＃34;的内容。在滚动框中，如果我点击该滚动框的行，则应显示含义和同义词。例如：

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

左侧是滚动框。滚动框再次包含很多项目。现在，如果我点击＆＃34; def＆＃34;在滚动框中，页面应如下所示：

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

如果点击＆＃34; ghi＆＃34;页面应如下所示：

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

在html页面中滚动mysql表内容

2 个答案: