PHP Mysql Jquery - 动态表格带有选项卡和'添加更多”按钮
这个问题可以通过以下步骤解决:
- 创建一个包含选项卡的表格。可以使用HTML和CSS来创建并格式化表格和选项卡。
例如:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<table id="table-1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
</table>
<div id="tabs">
<ul>
<li><a href="#tab-1">表格1</a></li>
<li><a href="#tab-2">表格2</a></li>
</ul>
<div id="tab-1">
<p>这是表格1</p>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>王五</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<div id="tab-2">
<p>这是表格2</p>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>赵六</td>
<td>35</td>
</tr>
</tbody>
</table>
</div>
</div>
<button id="add-row">添加更多</button>
<script>
$(document).ready(function(){
$('#tabs').tabs();
$('#add-row').click(function(){
$('#table-1 tbody').append('<tr><td>John Doe</td><td>32</td></tr>');
});
});
</script>
</