javascript实现静态HTML数据查询，新增，獲取賬戶信息
时间: 2024-02-04 07:05:09 浏览: 32
对于静态HTML数据的查询、新增和获取账户信息的实现，可以使用JavaScript结合HTML和CSS来实现。具体步骤如下：
1. 查询数据：可以使用JavaScript的DOM（文档对象模型）来获取HTML中的数据，例如使用document.getElementById()或document.querySelector()方法获取特定元素的值。如果要查询多条数据，可以使用数组或循环语句来遍历HTML中的元素。
2. 新增数据：可以使用JavaScript的DOM来创建新的HTML元素，并添加到页面中。例如，使用document.createElement()方法创建新元素，然后使用appendChild()方法添加到指定的父元素中。
3. 获取账户信息：可以使用JavaScript的Ajax技术来获取服务器端的数据，并使用DOM将数据显示在HTML页面中。例如，使用XMLHttpRequest对象发送HTTP请求，然后解析服务器端返回的JSON或XML数据，使用DOM将数据显示在HTML页面中。
下面是一个简单的示例代码，实现对静态HTML中的数据进行查询和新增，并使用Ajax技术获取账户信息：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>静态HTML数据查询、新增和获取账户信息</title>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
form {
margin-top: 20px;
}
input[type=text] {
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 10px;
}
input[type=submit] {
padding: 6px 12px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>账户列表</h1>
<table>
<thead>
<tr>
<th>账户名</th>
<th>密码</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>123456</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td>李四</td>
<td>abcdef</td>
<td>lisi@example.com</td>
</tr>
<tr>
<td>王五</td>
<td>qwerty</td>
<td>wangwu@example.com</td>
</tr>
</tbody>
</table>
<form id="addForm">
<h2>新增账户</h2>
<label>账户名：</label>
<input type="text" name="username">
<label>密码：</label>
<input type="text" name="password">
<label>邮箱：</label>
<input type="text" name="email">
<input type="submit" value="提交">
</form>
<div id="accountInfo">
<h2>账户信息</h2>
<p>账户名：<span id="username"></span></p>
<p>密码：<span id="password"></span></p>
<p>邮箱：<span id="email"></span></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
JavaScript代码（使用jQuery库）：
```javascript
$(document).ready(function() {
// 查询数据
var rows = $("table tbody tr");
console.log("账户数量：" + rows.length);
rows.each(function() {
var username = $(this).find("td:eq(0)").text();
var password = $(this).find("td:eq(1)").text();
var email = $(this).find("td:eq(2)").text();
console.log("账户名：" + username + "，密码：" + password + "，邮箱：" + email);
});
// 新增数据
$("#addForm").submit(function(event) {
event.preventDefault(); // 阻止表单提交
var username = $("input[name='username']").val();
var password = $("input[name='password']").val();
var email = $("input[name='email']").val();
var newRow = "<tr><td>" + username + "</td><td>" + password + "</td><td>" + email + "</td></tr>";
$("table tbody").append(newRow);
alert("账户添加成功！");
});
// 获取账户信息
$("#accountInfo").hide(); // 隐藏账户信息
$("table tbody tr").click(function() {
var username = $(this).find("td:eq(0)").text();
var password = $(this).find("td:eq(1)").text();
var email = $(this).find("td:eq(2)").text();
$("#username").text(username);
$("#password").text(password);
$("#email").text(email);
$("#accountInfo").show(); // 显示账户信息
});
// 使用Ajax获取账户信息
$("table tbody tr").click(function() {
var username = $(this).find("td:eq(0)").text();
$.ajax({
url: "account.php",
data: {username: username},
dataType: "json",
success: function(data) {
$("#username").text(data.username);
$("#password").text(data.password);
$("#email").text(data.email);
$("#accountInfo").show(); // 显示账户信息
},
error: function(xhr, status, error) {
console.log("获取账户信息失败：" + error);
}
});
});
});
```
其中，使用了jQuery库来简化代码，实现了对静态HTML数据的查询、新增和获取账户信息的功能。需要注意的是，使用Ajax获取账户信息需要在服务器端实现相应的数据接口，例如account.php文件中的代码：
```php
<?php
header('Content-Type: application/json');
$username = $_GET['username'];
if ($username == '张三') {
$data = array('username' => '张三', 'password' => '123456', 'email' => 'zhangsan@example.com');
} else if ($username == '李四') {
$data = array('username' => '李四', 'password' => 'abcdef', 'email' => 'lisi@example.com');
} else if ($username == '王五') {
$data = array('username' => '王五', 'password' => 'qwerty', 'email' => 'wangwu@example.com');
} else {
$data = array('username' => '', 'password' => '', 'email' => '');
}
echo json_encode($data);
?>
```
以上代码实现了一个简单的静态HTML数据查询、新增和获取账户信息的功能，可以根据实际需求进行扩展和优化。
相关推荐
最新推荐
Python3实现抓取javascript动态生成的html网页功能示例
主要介绍了Python3实现抓取javascript动态生成的html网页功能,结合实例形式分析了Python3使用selenium库针对javascript动态生成的HTML网页元素进行抓取的相关操作技巧,需要的朋友可以参考下
javascript 控制 html元素 显示/隐藏实现代码
1。编写js函数 [removed] function display(y){$(y).style.... 要显示/隐藏的html元素加上 id 属性 <table> ”menu”> 控制这个tr的显示/隐藏</td> </tr> </table> 3，添加按钮，链接等触发 js 函数 <input type=”b
纯JavaScript实现获取onclick、onchange等事件的值
主要介绍了JavaScript获取onclick、onchange等事件的值的方法,需要的朋友可以参考下
javascript 获取HTML DOM父、子、临近节点
令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）： 1. 通过顶层document节点获取： （1） document.getElementById(elementId)：该方法通过...
200行HTML+JavaScript实现年会抽奖程序
本文实例为大家分享了js实现年会抽奖程序的具体代码，供大家参考，具体内容如下 需求分析 1.多轮抽奖，每轮只有3个环节：展示奖品图，人名闪动，停止闪动确定中奖名单 2.中奖分级，例如试用期员工不能中二等奖或以上...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
【实战演练】增量式PID的simulink仿真实现
# 2.1 Simulink仿真环境简介
Simulink是MATLAB中用于建模、仿真和分析动态系统的图形化环境。它提供了一个直观的用户界面，允许用户使用块和连接线来创建系统模型。Simulink模型由以下元素组成：
- **子系统：**将复杂系统分解成更小的、可管理的模块。
- **块：**代表系统中的组件，如传感器、执行器和控制器。
- **连接线：**表示信号在块之间的流动。
Simulink仿真环境提供了广泛的块库，涵盖了各种工程学科，包括控制系统、电子和机械工程。它还支持用户自定义块的创建，以满足特定仿真需求。
# 2. Simulink仿真环境的搭建和建模
### 2.
训练集和测试集的准确率都99%，但是预测效果不好
即使训练集和测试集的准确率都很高，但是在实际的预测中表现不佳，可能会有以下几个原因：
1. 数据质量问题：模型训练和测试的数据可能存在问题，比如数据标签错误、数据集采样不均衡、数据集中存在异常值等问题，这些问题可能会导致模型在实际预测中表现不佳。
2. 特征工程问题：模型的特征工程可能存在问题，导致模型无法很好地捕捉数据的特征，从而影响预测效果。
3. 模型选择问题：模型的选择可能不合适，比如选择的模型太简单，无法很好地拟合数据，或者选择的模型太复杂，导致过拟合等问题。
4. 超参数调整问题：模型的超参数可能没有调整到最佳状态，需要进行调整。
针对以上可能的原因，可以采取相应的措施进
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。