Javascript 使用按钮显示MySQL中的指定数据

我已经创建了一个表来显示mysql数据库中的数据。如何让按钮在单击时仅显示指定的数据，如显示普通用户将仅显示普通用户的用户类型如果要根据当前选择刷新网格，则需要实施过滤系统

您必须确定筛选依据，并向服务器发送查询以执行类似于以下内容的SQL：

从“用户”中选择*，其中“用户类型”=“普通用户”；-或“高级用户” 收到所有用户或筛选用户（如果筛选处于活动状态）后，可以重新绘制该表

const userTable=document.querySelector'.user table'； const tbody=userTable.querySelector'tbody'； 常量normalFilter=document.querySelector'button[data filter value=Normal User]； const premiumFilter=document.querySelector'button[data filter value=Premium User]； 常量main==>{ normalFilter.addEventListener'click'，ToggleButtonActivate； premiumFilter.addEventListener'click'，ToggleButtonActivate； addRowstbody，选择All； }; 常量sqlData=` id、用户名、电话号码、用户类型 1，阿里，0123456789，普通用户 2，詹姆斯，1123456789，高级用户 3，威尔，2123456789，普通用户 玛丽，3123456789，高级用户 5，时间，4123456789，正常用户 `.修剪； 常量toggleFilter=btn=>btn.dataset.filterActive=！strtboolbtn.dataset.filterActive； 常量strToBool=str=>str=='false'？错：！！str； 常数xor=a，b=>a | | b&！a&b； 常量toggleButtonActiveState=e=>{ 切换filtere.target； 茶点； }; const selectAll==> [头，…尾]=> 字段=> tail.mapline=> line.split'，'.reduceAc，value，index=> {…acc，[字段[索引]]：值}，{} 头，分开 sqlData.split'\n'； const findByUserType=type=> 选择all.filter{user\u type}=>user\u type==type； const addRows=tbody，记录=>{ records.forEachrecord=>{ const tr=document.createElement'tr'； Object.valuesrecord.forEachvalue=>{ const td=document.createElement'td'； td.textContent=值； tr.TD； }; tbody.appendtr； }; }; const currentFilter==>对象 .fromEntries[…document.querySelectorAll'按钮[数据类型=筛选器]'] .mapfilter=>[ filter.dataset.filterValue， strToBoolfilter.dataset.filterActive ]; const query=filter=> !xorfilter['Normal User']，filter['Premium User'] ? 选择全部 ：过滤器['Premium User'] ? findByUserType“高级用户” ：findByUserType“普通用户”； 常数刷新表==>{ tbody.innerHTML=； addRowstbody、querycurrentFilter； }; 主要的 .用户表{ 边界塌陷：塌陷； 字体系列：无衬线； 字号：0.8em； 宽度：100%； } .用户表， .用户表th， .用户表td{ } .用户表th， .用户表td{ 填充：0.25em； } .用户表THAD th{ 文本对齐：左对齐； 颜色：235A81； } .用户表thead tr{ 背景：DFDF； 背景：线性梯度0度，DFDF0%，FFFFFF 100%； } .user表tbody tr:n个childeven{ 背景：DFDF； } 按钮[数据类型=过滤器]{ 背景：EEE； 边框：薄实灰色； 光标：指针； 填充：0.25em； } 按钮[数据类型=过滤器]：悬停{ 背景：FFF； } 按钮[数据过滤器激活=真]， 按钮[数据过滤器激活=真]：悬停{ 背景：黄色； } 显示普通用户 显示高级用户 身份证件 用户名 电话号码 用户类型

---

制作表单，提交表单，在PHP中获取提交选项，运行查询，输出结果。世界上每个web应用程序的基础知识。你学习过HTML表单/PHP教程吗？有两种不同的方法；在客户端使用JS进行DOM更改基本上只是显示/隐藏表行，或者执行AJAX调用来获取过滤后的数据。由您选择一个最适合您的需求并尝试实施它。假设您正在寻找一个Javascript解决方案，我猜您正在寻找这个：您的屏幕截图看起来像PHP My Admin？您是否有创建的表？如果是这样，发布HTML标记/css和JS代码。。。

<table id="table">
  <tr>   
  <th>id</th>
  <th>Name</th>
  <th>Phone_number</th>
  <th>Type</th>
  </tr>
</table>

<button type="button">Display normal user</button> 
<button type="button">Display premium user</button>