Question

我有一个程序，基本上允许观众输入员工姓名和工资，然后点击确认按钮。点击此按钮时，会在下表中为工资和员工姓名添加表格行和单元格。现在，结果也按字母顺序排序。但问题是，在显示createbody函数之后，结果才会排序。因此，在输入新员工之前，不会更新字母顺序。我的目标是让结果实时排序，或者有一个单独的按钮，可以对结果进行排序。无论哪种方式都没关系。有没有人能解决这些问题？代码如下：

    <!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title> Table Entry </title> 
</head> 
<body> 
<input type="text" id="fullName" value="" placeholder="Firstname"> :Enter employee name <br> 
<input type="text" id="salary" value="" placeholder="Salary"> :Enter employee salary <br> 
<input type="button" value="click me add to employee list" onclick="addToArray()"> <p>&nbsp;</p> 
<input type="button" value="click me to sort employees" onclick="sortEm()"> <p>&nbsp;</p> 
<div id="tablediv">
<table border="1" id="source" cellspacing="3" cellpadding="3"> 
 <thead> 
  <tr> <th>Employee Name</th> <th>Employee Salary</th> </tr> 
 </thead> 
 <tbody id="sourceBody"> 
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr> 
 </tbody> 
</table> </div>

<script type="text/javascript"> 

function sortEm() {
var tbl = document.getElementById('source');
var row = tbl.insertRow(1);
var cell1 = row.insertCell(0);
row.deleteCell(0);
document.getElementById("tbl").deleteRow(1);


}
var NameSalaries= []; 
function addToArray() { 
  var fn = document.getElementById('fullName').value; 
  var sly = document.getElementById('salary').value; 
  var both = [fn,sly]; 
  NameSalaries.push(both); 
  createBody(NameSalaries); 
  document.getElementById('fullName').focus(); 
  NameSalaries.sort();
  } 

function createBody(NS) { 
  var tarr = []; 
  for (var i=0; i<NS.length; i++) { 
    tarr.push('<tr><td>'+NS[i][0]+'</td><td>'+NS[i][1]+'</td></tr>');  
  } document.getElementById('sourceBody').innerHTML = tarr.join(''); 
} 



</script> 
</body> 
</html>

Answer 1

管理此类用例的典型方法是构建MVC模式以强制执行separation of concerns。在你的代码中，所有东西都纠缠在一起：按钮逻辑和表格渲染发生在同一个地方。

在MVC模式中， M odel保存您的数据， V iew呈现它， C ontroller管理您的逻辑，在需要时将数据从模型传递到视图。 MVC设计模式是分离软件功能的不同方面以获得更好的软件可维护性的极好示例。当这些方面得到妥善管理和隔离时，您不会偶然发现以下因素：“我的表何时排序”。

查看Backbone以获取针对javascript的非常模块化且轻量级的MVC框架，或查看AngularJS或EmberJS以获取更具野心的Web应用程序。

表数组排序

1 个答案: