javascript - 使用多维数组和排序
问题描述
在 HTML 中,我创建了一个简单的界面,用于输入员工的姓名、年龄和在公司中的职位,然后这些信息将显示在屏幕上。我还希望能够使用多维数组对按员工姓名或员工年龄显示的信息进行排序。
设置事件侦听器以在单击 HTML 中的按钮时执行适当的功能。
我需要以编程方式(使用事件侦听器)而不是使用 HTMLonclick
属性进行设置。
该addRecord
函数将在用户单击“添加记录”按钮时调用。它将从 HTML 字段('Name'、'Age'、'Position')中获取值,并按该顺序将它们添加到多维 (2d) 数组中。然后它需要使用记录详细信息更新 HTML 画布。
该writeRecords
方法需要处理将员工详细信息数组写入 HTML 画布的代码。该数组应仅在此处写入画布,而不应在代码中的其他任何地方写入。写入信息的样式必须适合在单行文本上舒适地放在画布上,同时仍然可读。输出还必须包含标签以及信息,即。“姓名:Amelia,年龄:23,职位:经理”。
sortName
必须实现该功能以按员工姓名对员工详细信息进行排序并更新画布中的详细信息。这必须在用户单击排序选项中的“按名称”按钮时完成。
sortAge
必须实现该功能以按员工年龄对员工详细信息进行排序并更新画布中的详细信息。这必须在用户单击排序选项中的“按年龄”按钮时完成。
这是我当前的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>52DA session 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body onload="setupCanvas()">
<div id="container">
<h1 id="firstHeading" class="blueTxt">Employee Records</h1>
<canvas id="employeeRecords" width="400" height="400">
<p>This example requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a> canvas feature.</p>
</canvas>
<h3>Sort</h3>
<button id="sortByName">By Name</button>
<button id="sortByAge">By Age</button>
<br/>
<br/>
<form>
<fieldset>
<legend><h3>Employee Details Entry</h3></legend>
<p><label>Name: <input type="text" id="name" /></label></p>
<p><label>Age: <input type="text" id="age" /></label></p>
<p><label>Position: <input type="text" id="position" /></label></p>
<input type="button" id="addRecord" onclick="" value="Add Record"/>
</fieldset>
</form>
<br />
</div>
<script src="../js/employee_script.js"></script>
</body>
</html>
它只显示详细信息将显示到的输入表单和画布,这是我的 javascript 框架,在代码完全不起作用后,我已经将其清理回基础。
function setupCanvas(){
var canvas = document.getElementById('employeeRecords');
var ctx;
if (canvas.getContext) {
ctx = canvas.getContext('2d');
ctx.fillStyle = "lightblue";
ctx.rect(0, 0, 500, 500);
ctx.fill();
}
function sortName(){
}
function sortAge(){
}
function addRecord(){
}
function writeRecords(){
}
function resetArray(){
}
}
我应该如何实现这个?
解决方案
事件是文档对象模型 (DOM) Level 3 的一部分,每个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。当页面加载时,它被称为一个事件。当用户单击一个按钮时,该单击是一个事件。您可以设置特定功能在用户执行事件时运行。这些函数侦听一个事件,然后启动该函数。您可以通过识别元素并将事件侦听器添加为方法来集成事件侦听器。您还可以使用名为 addEventListener() 的方法添加事件侦听器。但是有些浏览器不支持。处理事件的方法称为事件处理程序。
//
//
/*
* employee_script.js
*/
var employeeA = new Array();
var employee = new Object();
var employeeList = [];
var employeeListA = [];
var name;
var age;
var position;
var type = 3;
var canvas;
var ctx;
function setupCanvas(){
//alert("1");
canvas = document.getElementById("employeeRecords");
if (canvas.getContext) {
ctx = canvas.getContext('2d');
ctx.fillStyle = "lightblue";
ctx.rect(0, 0, 500, 500);
ctx.fill();
}
//alert("2");
document.getElementById('sortByName').onclick = function() {
type = 0;
//sortName();
//writeRecords();
};
document.getElementById('sortByAge').onclick = function() {
type = 1;
//sortAge();
//writeRecords();
};
document.getElementById('addRecord').onclick = function() {
addRecord();
};
//alert("3");
function sortName(){
type = 0;
employeeList.forEach(function (empl){
name = empl.name;
age = empl.age;
position = empl.position;
employeeA = new Array(name, age, position);
employeeListA.push(employeeA);
});
var y = employeeListA.length;
if(y > 1)
{
employeeListA.sort();
}
}
function sortAge(){
type = 1;
employeeList.forEach(function (empl){
name = empl.name;
age = empl.age;
position = empl.position;
employeeA = new Array(age, name, position);
employeeListA.push(employeeA);
});
var y = employeeListA.length;
if(y > 1)
{
employeeListA.sort();
}
}
function addRecord(){
employee.name = document.getElementById('name').value;
employee.age = document.getElementById('age').value;
employee.position = document.getElementById('position').value;
employeeList.push(employee);
employee = new Object();
writeRecords();
}
function writeRecords(){
ctx.clearRect(0, 0, canvas.width, canvas.height );
ctx.font = "15px Aril";
var y = 10;
resetArray();
employeeListA.forEach(function (empl){
if(type === 1)
{
var m = "Name: "+ empl[1] +", Age: "+empl[0]+", Position: "+empl[2];
}
else
{
var m = "Name: "+ empl[0] +", Age: "+empl[1]+", Position: "+empl[2];
}
ctx.fillText(m, 10, y);
y += 18;
});
}
function resetArray(){
employeeListA = [];
if(type === 0)
{
sortName();
}
else
{
if (type === 1)
{
sortAge();
}
else
{
employeeList.forEach(function (empl){
name = empl.name;
age = empl.age;
position = empl.position;
employeeA = new Array(name, age, position);
employeeListA.push(employeeA);
});
}
}
}
//var testb = document.querySelector('button');
//testb.addEventListener('click', event => {
//alert(event +" "+ event.target);
//});
//var button = document.querySelector('button');
//button.addEventListener('click', testE);
//function testE()
//{
// alert("Test...Event");
//}
document.getElementById('sortByName').addEventListener("click", function(event){
alert("sortByName. "+ event);
type = 0;
writeRecords();
});
document.getElementById('sortByAge').addEventListener("click", function(event){
alert("sortByAge. "+ event);
type = 1;
writeRecords();
});
document.getElementById('addRecord').addEventListener("click", function(event){
alert("addRecord. "+ event);
//addRecord();
});
}
//alert("Employee Records.");
window.onload = function(){
//alert("Start");
setupCanvas();
//alert("Done");
};
//
//
推荐阅读
- hyperledger-sawtooth - 使用 hyperledger caliper 对锯齿 1.0.0 进行基准测试时出错(错误:基准测试失败,错误代码 6)
- java - 使用 Java 中的 if 语句检查 int[] 数组是否在范围内
- css - 如何使一个网格列按比例大于另一列?
- java - 使用值对枚举列表进行排序的快速方法
- kubernetes - 如何在 kubernetes 中使用自定义镜像 pull secret 创建 dask-gateway 工作节点
- javascript - 我的代码不起作用:有人可以帮助我吗?
- c# - 如果在代码中使用了 Response.Write,则 asp 按钮不起作用
- javascript - 等待导入的 puppeteer 函数完成然后开始新的一行 nodeJS
- mysql - 如何在一个 sql 语句中编写 max、group by、where、order by?
- r - contingencyTableBF 是否有循环