继续完善上述代码 添加一个居中于页面的、有背景颜色的、带边框线的table表单,平时该表格为隐藏状态,单击“添加”按钮时,利用jquary的show()方法显示该表格;对于这个表格的具体要求:有七行内容;第一行为”请输入商品信息”的单独成行的文本内容;2-6行均分为两列,该行内容居中显示;第二行第一列为“商品内容:”的文本内容、该行第二列为一个可输入内容的文本框;第三行第一列为“商品名称:”的文本内容、该行第二列为一个可输入内容的文本框;第四行第一列为“商品类别:”的文本内容、该行第二列为一个下拉选择框(默认显示“请选择商品类别”,下拉选项有粮食作物、蔬菜、水果三种);第五行第一列为“商品产地:”的文本内容、该行第二列为一个可输入内容的文本框;第六行第一列为“商品价格:”的文本内容、该行第二列为一个可输入内容的文本框;
时间: 2024-03-13 18:42:35 浏览: 29
以下是代码实现:
HTML:
```html
<button id="add-btn">添加</button>
<table id="product-table">
<tr>
<td colspan="2"><strong>请输入商品信息</strong></td>
</tr>
<tr>
<td align="center">商品内容:</td>
<td><input type="text" name="content"></td>
</tr>
<tr>
<td align="center">商品名称:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td align="center">商品类别:</td>
<td>
<select name="category">
<option value="">请选择商品类别</option>
<option value="grain">粮食作物</option>
<option value="vegetable">蔬菜</option>
<option value="fruit">水果</option>
</select>
</td>
</tr>
<tr>
<td align="center">商品产地:</td>
<td><input type="text" name="origin"></td>
</tr>
<tr>
<td align="center">商品价格:</td>
<td><input type="number" name="price"></td>
</tr>
</table>
```
CSS:
```css
#product-table {
display: none;
margin: 0 auto;
border: 1px solid #ccc;
background-color: #f5f5f5;
width: 50%;
}
#product-table td {
padding: 10px;
text-align: center;
}
#product-table select {
width: 100%;
}
```
JavaScript:
```javascript
$(document).ready(function() {
$('#add-btn').click(function() {
$('#product-table').show();
});
});
```
解释:
1. 首先,我们设置一个按钮,点击该按钮可以显示表单。按钮的id为`add-btn`。
2. 接着,我们创建一个table元素,该表单的id为`product-table`,默认情况下是隐藏的。
3. 表单中有7行内容,第一行为单独的文本内容,使用`colspan`属性将该单元格合并为一列。
4. 第2-6行均分为两列,使用`align`属性将内容居中显示。
5. 第4行第二列为下拉选择框,使用`select`元素创建,下拉选项使用`option`元素创建。
6. CSS中设置表单的样式,包括边框、背景颜色、居中等。
7. JavaScript中使用jQuery的`click()`方法监听按钮点击事件,当按钮被点击时,使用`show()`方法显示表单。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)