Fatal编程技术网
  • javascript/
  • Javascript 使用多维数组和排序

Javascript 使用多维数组和排序

javascript html arrays canvas

Javascript 使用多维数组和排序,javascript,html,arrays,canvas,Javascript,Html,Arrays,Canvas,在HTML中，我创建了一个简单的界面，用于输入员工的姓名、年龄和在公司的职位，然后这些信息将显示在屏幕上。我还希望能够使用多维数组按员工姓名或年龄对显示的信息进行排序 设置事件侦听器，以便在单击HTML中的按钮时执行适当的函数 我需要使用事件侦听器以编程方式设置它，而不是使用HTML onclick属性 当用户单击“添加记录”按钮时，将调用addRecord函数。它将从HTML字段“Name”、“Age”、“Position”中获取值，并按该顺序将它们添加到多维2d数组中。然后需要使用记录详细信

在HTML中，我创建了一个简单的界面，用于输入员工的姓名、年龄和在公司的职位，然后这些信息将显示在屏幕上。我还希望能够使用多维数组按员工姓名或年龄对显示的信息进行排序

设置事件侦听器，以便在单击HTML中的按钮时执行适当的函数

我需要使用事件侦听器以编程方式设置它，而不是使用HTML onclick属性

当用户单击“添加记录”按钮时，将调用addRecord函数。它将从HTML字段“Name”、“Age”、“Position”中获取值，并按该顺序将它们添加到多维2d数组中。然后需要使用记录详细信息更新HTML画布

writeRecords方法需要处理将员工详细信息数组写入HTML画布的代码。数组只应写入此处的画布，而不应写入代码中的任何其他位置。信息书写的样式必须适合于在画布上舒适地放置在一行文本上，同时仍具有可读性。输出还必须包含标签和信息，即“姓名：阿米莉亚，年龄：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>
如何实现这一点？

事件是文档对象模型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");
};
//

//
这个问题太宽泛了。你要找的是一个能实现一系列功能的人，这是面试问题还是家庭作业？。你真的尝试过实现它吗？当你陷入困境时，先问一个具体的问题，然后搜索网页，而不是问整个解决方案：我不是在寻找整个代码，我只是想知道代码id使用了什么类型的函数。你不明白我寻找这个确切答案已经有多久了，伙计！很难把它说出来，就像我不只是想作弊一样，因为我根本不知道从哪里开始！非常感谢，回头看看每一个代码，了解每一件事情是如何工作的，为什么工作，你是一个传奇人物。 
//
//
/* 
* 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");
};
//

//