html默认隐藏三个表格,有三个单选按钮,点击不同的按钮显示对应的隐藏表格,并将在显示出的表格中输入的内容插入在数据库中,不同的表格在数据库中对应不同的表单
时间: 2024-03-01 14:53:06 浏览: 120
好的,这是一个比较具体的问题。首先,需要在HTML代码中定义三个表格,并设置它们的display属性为none,如下所示:
```html
<table id="table1" style="display:none;">
<!-- 表格1的内容 -->
</table>
<table id="table2" style="display:none;">
<!-- 表格2的内容 -->
</table>
<table id="table3" style="display:none;">
<!-- 表格3的内容 -->
</table>
```
然后,需要定义三个单选按钮,并添加一个点击事件,根据不同的按钮选择显示对应的表格。同时,在表格中输入内容时,需要将数据传递给后台程序,以插入到数据库中。
以下是示例代码:
```html
<form id="myForm" method="post" action="insert.php">
<input type="radio" name="table" value="table1" onclick="showTable('table1')">显示表格1
<input type="radio" name="table" value="table2" onclick="showTable('table2')">显示表格2
<input type="radio" name="table" value="table3" onclick="showTable('table3')">显示表格3
<table id="table1" style="display:none;">
<!-- 表格1的内容 -->
<tr>
<td>姓名:</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" name="age" /></td>
</tr>
</table>
<table id="table2" style="display:none;">
<!-- 表格2的内容 -->
<tr>
<td>地址:</td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" name="phone" /></td>
</tr>
</table>
<table id="table3" style="display:none;">
<!-- 表格3的内容 -->
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>QQ:</td>
<td><input type="text" name="qq" /></td>
</tr>
</table>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
function showTable(tableId) {
// 隐藏所有表格
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
tables[i].style.display = "none";
}
// 显示对应的表格
var table = document.getElementById(tableId);
table.style.display = "table";
}
</script>
```
在这个示例中,我们定义了一个表单,并为每个表格中的输入字段设置了一个name属性,用于在提交表单时将数据传递给后台程序。同时,我们还定义了一个名为showTable的JavaScript函数,用于根据单选按钮的值显示对应的表格。
最后,需要在后台程序(如insert.php)中接收表单提交的数据,并将其插入到不同的数据库表中,具体实现方式取决于你使用的后台语言和数据库。
阅读全文