我正在制作一个表，我希望当用户单击表头时，表会展开，类似于下拉菜单。
HTML:
{% if all_farms %}
{% for farm in all_farms %}
<div class="col-lg-12">
<table class="table table-striped">
<thead class="table-head">
<tr text-align="center">
<th scope="col" style="vertical-align:middle">{{ farm }}</th>
<th scope="col" width='30%' style="vertical-align:middle">{{ farm.uf }}</th>
<th scope="col" width='7%' style="vertical-align:middle">{{ farm.city }}</th>
{% for farm_data, data in farms_data.items %}
{% if farm == farm_data %}
{% for info in data %}
<th scope="col" width='7%' style="vertical-align:middle">{% if info %}{{ info|intcomma }} ha{% else %}-{% endif %}</th>
{% endfor %}
{% endif %}
{% endfor %}
<th scope="col" width='3%' style="vertical-align:middle"><a href="{% url 'farm_detail' farm.id %}" class="link"><button class="btn btn-primary btn-xs"><i class="fa fa-gears"></i></button></a></th>
<th scope="col" width='3%' style="vertical-align:middle"><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteModal" data-font="farm/" data-whatever="{{ farm.id }}" data-name="{{ farm.name }}"><i class="fa fa-trash-o"></i></button></th>
</tr>
</thead>
<tbody>
{% for registration in all_registrations %}
{% if registration.farm == farm %}
<tr text-align="center">
<td style="vertical-align:middle;text-align:center">{{ registration.number }}</td>
<td style="vertical-align:middle;text-align:center">{% if registration.uf %}{{ registration.uf }}{% else %}-{% endif %}</td>
<td style="vertical-align:middle;text-align:center">{% if registration.city %}{{ registration.city }}{% else %}-{% endif %}</td>
<td style="vertical-align:middle;text-align:center">{% if registration.area %}{{ registration.area|intcomma }} ha{% else %}-{% endif %}</td>
<td style="vertical-align:middle;text-align:center">{% if registration.aee %}{{ registration.aee|intcomma }} ha{% else %}-{% endif %}</td>
<td class="client-edit"><a href="{% url 'registration_edit' registration.id %}" class="link"><button class="btn btn-primary btn-xs"><i class="fa fa-gears"></i></button></a></td>
<td class="task-delete"><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteModal" data-font="farm/" data-whatever="{{ obj.id }}" data-name="{{ obj.name }}"><i class="fa fa-trash-o"></i></button></td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
{% endfor %}
{% else %}
<h4 style="text-align:center">Este cliente ainda não tem propriedades adicionadas</h4>
{% endif %}
我想要"农场"行是下拉菜单，当点击时，"注册"信息将被列出。我不太了解前端。有人能告诉我怎么走吗?
给你的表头一个onClick函数
给你的td一个"display: none"的CSS规则。确保它有一个类使它"display: none"
然后在body标签的正上方或table标签的下方创建一个script标签。
在script标签中，创建一个与表头中的onClick同名的函数
如果单击table head，该函数将删除CSS规则类。使用element.classList.remove()
希望对你有帮助。
编辑:添加了一个适合您想法的示例代码。标题是可点击的，一旦点击，表格数据就会显示出来。所有的样式和逻辑都在script标签中完成。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clickable Table Header</title>
</head>
<body>
<table border="2px">
<thead onClick="expandTable()">
<tr>
<th>Farm</th>
<th>Farm UF</th>
<th>Farm City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Farm 1</td>
<td>Farm 2</td>
<td>Farm 3</td>
</tr>
<tr>
<td>Farm 11</td>
<td>Farm 12</td>
<td>Farm 13</td>
</tr>
<tr>
<td>Farm 21</td>
<td>Farm 22</td>
<td>Farm 23</td>
</tr>
</tbody>
</table>
<script>
//on switch shows, off switch non-existent
var theSwitch = "on";
var allTD = document.querySelectorAll("td");
function expandTable() {
if (theSwitch == "off") {
for(i=0; i<allTD.length; i++) {
allTD[i].style.display = "none";
}
theSwitch = "on";
}
else { //theSwitch == "on"
for(i=0; i<allTD.length; i++) {
allTD[i].style.display = "table-cell";
}
theSwitch = "off";
}
}
</script>
</body>
</html>