如何使用js写增删改查
时间: 2023-03-12 20:09:29 浏览: 108
使用 JavaScript 写增删改查的方法有很多种。通常可以使用基本的 JavaScript 代码及相关的 API 来实现。也可以使用通用的 JavaScript 框架,比如 AngularJS 或 React,来帮助实现增删改查的功能。
相关问题
angular js写增删改查代码实现
下面是使用AngularJS实现增删改查的示例代码:
HTML模板:
```html
<div ng-app="myApp" ng-controller="myCtrl">
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<button ng-click="editUser(user)">编辑</button>
<button ng-click="deleteUser(user)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加/编辑用户</h2>
<form ng-submit="saveUser()">
<label>姓名:</label>
<input type="text" ng-model="currentUser.name" required />
<br />
<label>年龄:</label>
<input type="number" ng-model="currentUser.age" required />
<br />
<button type="submit">保存</button>
</form>
</div>
```
AngularJS控制器:
```javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
];
$scope.currentUser = {};
$scope.editUser = function(user) {
$scope.currentUser = angular.copy(user);
};
$scope.saveUser = function() {
if ($scope.currentUser.name && $scope.currentUser.age) {
if ($scope.currentUser.hasOwnProperty('$index')) {
$scope.users[$scope.currentUser.$index] = angular.copy($scope.currentUser);
} else {
$scope.users.push(angular.copy($scope.currentUser));
}
$scope.currentUser = {};
}
};
$scope.deleteUser = function(user) {
var index = $scope.users.indexOf(user);
if (index > -1) {
$scope.users.splice(index, 1);
}
};
});
```
上述代码实现了一个简单的用户列表,包含姓名和年龄字段。用户可以添加、编辑和删除用户信息。使用ng-repeat指令在表格中显示用户列表,通过ng-click指令调用相应的方法进行编辑和删除操作,ng-model指令绑定用户输入的数据。保存时,根据当前用户是否包含索引属性来判断是新增还是编辑操作。
使用testjs写一个增删改查
很抱歉,我不清楚您所指的“testjs”是什么。但是,我可以给您提供一个使用JavaScript语言实现增删改查的简单示例。
```html
<!DOCTYPE html>
<html>
<head>
<title>增删改查示例</title>
</head>
<body>
<h1>增删改查示例</h1>
<label for="input-name">名称:</label>
<input type="text" id="input-name">
<label for="input-age">年龄:</label>
<input type="number" id="input-age">
<button onclick="add()">添加</button>
<br><br>
<table>
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<script>
// 定义一个数组用于存储数据
let data = [];
// 获取页面元素
const inputName = document.getElementById('input-name');
const inputAge = document.getElementById('input-age');
const tableBody = document.getElementById('table-body');
// 添加数据
function add() {
// 获取输入的名称和年龄
const name = inputName.value.trim();
const age = inputAge.value.trim();
// 判断输入是否为空
if (!name || !age) {
alert('名称和年龄不能为空!');
return;
}
// 将数据添加到数组中
data.push({name, age});
// 清空输入框
inputName.value = '';
inputAge.value = '';
// 更新表格
renderTable();
}
// 删除数据
function remove(index) {
// 从数组中删除指定的数据
data.splice(index, 1);
// 更新表格
renderTable();
}
// 编辑数据
function edit(index) {
// 获取指定位置的数据
const item = data[index];
// 将数据填充到输入框中
inputName.value = item.name;
inputAge.value = item.age;
// 从数组中删除指定的数据
data.splice(index, 1);
// 更新表格
renderTable();
}
// 渲染表格
function renderTable() {
// 清空表格
tableBody.innerHTML = '';
// 遍历数组,生成表格数据
data.forEach((item, index) => {
const tr = document.createElement('tr');
const tdName = document.createElement('td');
const tdAge = document.createElement('td');
const tdBtns = document.createElement('td');
const btnEdit = document.createElement('button');
const btnRemove = document.createElement('button');
tdName.textContent = item.name;
tdAge.textContent = item.age;
btnEdit.textContent = '编辑';
btnEdit.onclick = () => edit(index);
btnRemove.textContent = '删除';
btnRemove.onclick = () => remove(index);
tdBtns.appendChild(btnEdit);
tdBtns.appendChild(btnRemove);
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdBtns);
tableBody.appendChild(tr);
});
}
</script>
</body>
</html>
```
这个示例使用了一个数组来存储数据,并通过JavaScript动态生成HTML表格来展示数据。其中,通过`add()`函数实现添加数据、通过`remove()`函数实现删除数据、通过`edit()`函数实现编辑数据。最后,通过`renderTable()`函数来动态渲染表格。