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

我不认为公平地说，一种方式明显优于另一方，因为它们都有利有弊。

按按钮排序

+用户更多的控制感。接口有助于在您点击告诉应用程序执行此操作的按钮之前不执行任何操作。有些客户更喜欢这种类型的界面（通常是较旧的客户端）。

+幕后没有额外的工作，因此您可以保持应用程序的最大响应能力。在这种情况下可能不是什么大问题，但值得一提。

- 不太直观。添加更多功能总会增加复杂性。有时功能值得复杂，有时则不然。看到有另一种方法可以做到这一点，我会争论后者。

实时排序

+界面是一致的。如果用户指出了特定的订单，并且您允许违反该订单，虽然可以接受，但用户仍然会注意到，这就像是您电影中的一个刺耳的漏洞。有时候最好不要破坏界面。

- 意外延误。如果您需要在用户明确要求执行操作的时刻之外更新列表，则可能需要进行排序，因此会产生微小的延迟。随着列表中项目数量的增加，这种延迟会明显增加。

- 必须在列表中再次找到插入的员工。如果您愿意做一些工作并跳到列表中添加员工的位置，这在技术上可以有一个解决方法。如果您正在使用分页，则更为相关。

- 增加了程序的复杂性。与按键点不太直观的排序相反，通常更直观的客户端界面需要更多的复杂性，使其在幕后工作。

结论

如果我可以提出建议，我认为你应该有表列标题，只有在点击时才排序。这些行将根据单击的列进行排序，单击第二次将反转顺序（提示：您不需要再次对其进行排序）。

添加新员工时，只需按当前顺序求助即可。如果不出意外，您的客户不太可能抱怨您只是维护订单而不是将员工添加到列表的末尾。

如果您认为自己可能正在处理非常大的列表，请考虑使用webworker执行排序以避免页面延迟。如果您正在使用插入排序，则可以在Webworker排序时返回结果，并在页面上重新创建行。

Javascript数组排序问题

1 个答案:

按按钮排序

实时排序

结论