帮我用jquery html js css 写一个表头是产品、金额、名字的动态添加行数据的demo
时间: 2024-05-08 18:16:00 浏览: 12
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态添加表格行数据</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>动态添加表格行数据</h2>
<table id="myTable">
<thead>
<tr>
<th>产品</th>
<th>金额</th>
<th>名字</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone</td>
<td>$999</td>
<td>John Doe</td>
</tr>
<tr>
<td>iPad</td>
<td>$799</td>
<td>Jane Doe</td>
</tr>
</tbody>
</table>
<br>
<label for="product">产品:</label>
<input type="text" id="product" name="product">
<label for="amount">金额:</label>
<input type="text" id="amount" name="amount">
<label for="name">名字:</label>
<input type="text" id="name" name="name">
<button id="addRow">添加行</button>
<script src="main.js"></script>
</body>
</html>
```
JS代码:
```js
$(document).ready(function() {
$("#addRow").click(function() {
var product = $("#product").val();
var amount = $("#amount").val();
var name = $("#name").val();
if (product == "" || amount == "" || name == "") {
alert("请填写完整信息!");
return;
}
var newRow = "<tr><td>" + product + "</td><td>" + amount + "</td><td>" + name + "</td></tr>";
$("#myTable tbody").append(newRow);
$("#product").val("");
$("#amount").val("");
$("#name").val("");
});
});
```
CSS代码:
```css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background-color: #4CAF50;
color: white;
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)