怎么给表格行添加一个点击事件并展开显示后台返回的信息？
谁能帮我给表格行添加一个点击事件并展开显示后台返回的信息啊？我后端的，不知道前端怎么写
这是我想要加效果的地方
这两张是例图，不要那个箭头也可以，直接点击行就行
jsp代码
</head>
<body>
<div id="increasedis" class="clearfix"
style="overflow-x: hidden; height: 1000px;">
<div class="mws-panel grid_8 "
style="width: 100%; padding-left: 12px; margin: 0px 0px 10px 0px; min-width: 650px">
<div class="mws-panel-header" style="height: 50px;">
<span style="display: inline" class="mws-i-24 i-table-1">查询热表地址</span>
<span id="xqspan" style="display: inline"></span>
</div>
<div class="search">
<p>
<label for="xqNameId">选择小区</label> <select id="xqNameId"
name="xqName">
<c:if test="${!empty yhInfoList }">
<option>--选择小区名称--</option>
<c:forEach items="${yhInfoList}" var="yhInfolist">
<option>${yhInfolist.xqName}</option>
</c:forEach>
</c:if>
</select> <label for="qgID">区管ID</label> <select name="qgID"
id="qgID">
<option value="">--区管ID--</option>
</select>
<!-- 区管ID模糊查询：<input type="text" name="QgID" id="QgID"> -->
<input id="operation_one_btn" type="button" onclick="selQg()"
value="搜索">
<!-- <button id="operation_one_btn" onclick="allSelected()">全选</button> -->
组号：<input type="text" size="10px" name="Zuhao" id="Zuhao">
<button type="button" id="operation_one_btn" onclick="QgCcRb()">查询热表地址</button>
<button type="button" id="operation_one_btn" onclick="XtCcRb()">查询系统热表地址</button>
<br>
<!-- 选择组号:<select id="xzzh"><option value="">--选择组号--</option>
<option value="">1</option><option value="" >2</option><option value="">3</option><option value="">4</option><option value="">5</option>
<option value="">6</option><option value="" >7</option><option value="">8</option><option value="">9</option><option value="">10</option>
<option value="">11</option><option value="" >12</option><option value="">13</option><option value="">14</option><option value="">15</option>
<option value="">16</option><option value="" >17</option><option value="">18</option><option value="">19</option><option value="">20</option>
<option value="">21</option><option value="" >22</option><option value="">23</option><option value="">24</option><option value="">25</option>
</select> -->
<button id="operation_one_btn" onclick="allSelected()" style="height:20px;width:40px;">全选</button>
组号：<input type="text" size="8px" name="Zuhao" id="Zuhao">
1：<input type="text" size="13px" name="RbAd1" id="RbAd1">
2：<input type="text" size="13px" name="RbAd2" id="RbAd2">
3：<input type="text" size="13px" name="RbAd3" id="RbAd3">
4：<input type="text" size="13px" name="RbAd4" id="RbAd4">
5：<input type="text" size="13px" name="RbAd5" id="RbAd5">
6：<input type="text" size="13px" name="RbAd6" id="RbAd6">
7：<input type="text" size="13px" name="RbAd7" id="RbAd7">
8：<input type="text" size="13px" name="RbAd8" id="RbAd8">
9：<input type="text" size="13px" name="RbAd9" id="RbAd9">
10：<input type="text" size="13px" name="RbAd10" id="RbAd10">
<button type="button" id="operation_one_btn" onclick="add()">添加热表地址</button>
<button type="button" id="operation_one_btn" onclick="addAll()">添加全部热表地址</button>
<!-- <input type="button" value="导出" id="operation_one_btn" onclick="doExportExcel()" /> -->
</p>
</div>
<div id="aa" class="mws-panel-body"
style="overflow: scroll !important; height: 680px; display: none;">
<table id="bb" class="mws-table" style="width: 115%;">
<thead>
<tr>
<th class="table-th-css" width="6%"></th>
<th class="table-th-css">区管ID<span class="span-up"></span>
<span class="span-down"></span></th>
<th class="table-th-css">热表总数量<span class="span-up"></span>
<span class="span-down"></span></th>
<th class="table-th-css">组号<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">本组数量<span class="span-up"></span>
<span class="span-down"></span></th>
<th class="table-th-css">一<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">二<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">三<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">四<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">五<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">六<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">七<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">八<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">九<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">十<span class="span-up"></span> <span
class="span-down"></span></th>
<th class="table-th-css">更新时间<span class="span-up"></span> <span
class="span-down"></span></th>
</tr>
</thead>
<tbody id="qgccrbInfo">
<c:forEach var="qg" items="${qgccrb}" varStatus="status">
<tr
<c:if test="${status.index%2==1 }">style="background-color:#F2F2F2"</c:if>>
<td><input type="checkbox" value="${qg.qgCcrb.qgID}"
name="ppchecked" /></td>
<td>${qg.qgCcrb.qgID}</td>
<td>${qg.qgCcrb.rbsl}</td>
<td>${qg.qgCcrb.zuhao}</td>
<td>${qg.qgCcrb.bzrbsl}</td>
<td>${qg.qgCcrb.rbad1}</td>
<td>${qg.qgCcrb.rbad2}</td>
<td>${qg.qgCcrb.rbad3}</td>
<td>${qg.qgCcrb.rbad4}</td>
<td>${qg.qgCcrb.rbad5}</td>
<td>${qg.qgCcrb.rbad6}</td>
<td>${qg.qgCcrb.rbad7}</td>
<td>${qg.qgCcrb.rbad8}</td>
<td>${qg.qgCcrb.rbad9}</td>
<td>${qg.qgCcrb.rbad10}</td>
<td>${qg.qgCcrb.recordTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
后台代码
// 查询系统存储热表
@RequestMapping("findxtccrb")
@ResponseBody
public JSONObject findxtccrb(HttpSession session, String ids, String rbAd) throws SQLException {
// 连接数据库
DatabaseUtil dbUtil = DatabaseUtil.getInstance();
Connection connc = dbUtil.getConnection();
ResultSet rstqg = null;
PreparedStatement psqg = null;
//根据区管ID查询热表总数
String cxqgxx = "select Count(RbAd) as RbCount from T_RbInfo where QgID='" + ids + "'";
psqg = connc.prepareStatement(cxqgxx);
rstqg = psqg.executeQuery();
int rowCount = 0;
if (rstqg.next()) {
rowCount = rstqg.getInt(1);
}
JSONObject json = new JSONObject();
rbList = rbService.findxtccrb(ids);
json.put("rbList", rbList);
json.put("rowCount", rowCount);
System.out.println(rbList);
//后台输出
log.info("*********************************************************************");
log.info(ids + "区管下热表数量" + rowCount);
return json;
}
获取标签元素，var btns = document.queryselectAll(".btn");
绑定事件 btns.onclick = function(){
}
点击之后就可以获取唯一的标识用来匹配你点的是哪一个获取哪一个的信息，然后再把内容渲染出来
前端 不熟就直接用 ui 库 吧。 https://element.eleme.cn/#/zh-CN/component/tree?%ra=link
对象数组渲染上去后，点击每行获取当前行的索引，获取数组下相应索引的元素对象