js将json写入表格后还能进行添加 代码
时间: 2024-01-07 08:02:39 浏览: 38
下面是一个示例代码,实现了将json数据写入表格,并且可以通过输入框添加新数据到表格中:
```html
<!DOCTYPE html>
<html>
<head>
<title>JSON to Table</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<input type="text" id="name" placeholder="Name">
<input type="text" id="age" placeholder="Age">
<input type="text" id="gender" placeholder="Gender">
<button onclick="addRow()">Add Row</button>
<script>
var jsonData = [
{ "name": "John", "age": 30, "gender": "Male" },
{ "name": "Emily", "age": 25, "gender": "Female" },
{ "name": "David", "age": 40, "gender": "Male" }
];
$(document).ready(function() {
$.each(jsonData, function(index, value) {
var row = $('<tr>');
row.append($('<td>').html(value.name));
row.append($('<td>').html(value.age));
row.append($('<td>').html(value.gender));
$('#myTable tbody').append(row);
});
});
function addRow() {
var name = $('#name').val();
var age = $('#age').val();
var gender = $('#gender').val();
var row = $('<tr>');
row.append($('<td>').html(name));
row.append($('<td>').html(age));
row.append($('<td>').html(gender));
$('#myTable tbody').append(row);
// clear input fields
$('#name').val('');
$('#age').val('');
$('#gender').val('');
}
</script>
</body>
</html>
```
在上面的代码中,我们首先定义了一个json数据对象`jsonData`,然后使用jQuery的`each()`方法将数据写入表格中。在页面中添加了三个输入框和一个按钮,通过`addRow()`函数可以将输入框中的数据添加到表格中。函数首先获取输入框中的值,然后创建一个新的表格行并将值添加到单元格中,最后将新行添加到表格中。输入框的值添加到表格中后,我们还调用了`val()`方法将输入框的值清空。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)