2015-07-10 2 views
-2

У меня есть программа, которая в основном позволяет зрителю вводить имя сотрудника и его зарплату, а затем нажать кнопку подтверждения. Когда эта кнопка ударяется, строка таблицы и ячейка добавляются как для названия зарплаты, так и для сотрудника в таблице ниже. Теперь результаты также сортируются по алфавиту. Однако проблема заключается в том, что результаты не сортируются до отображения функции 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> 
+0

Вы не можете сортировать имя зарплаты, прежде чем создавать тело? просто вызовите 'NameSalaries.sort()', а затем создайте тело с отсортированным массивом. –

+0

Постарайтесь как можно больше отвлечь свой прецедент, задавая здесь вопрос. Нам не нужно знать о «сотрудниках», «зарплатах» или видеть всю вашу разметку html. Нам просто нужно знать, что вам нужно отобразить массив отсортированным массивом элементов; ненужные замечания просто мешают людям читать. –

+0

Вы правы christophe, спасибо за подсказку! –

ответ

0

Типичный способ управления такого случая использования является построением MVC шаблона для обеспечения выполнения separation of concerns. В вашем коде все запутано: логика кнопок и рендеринг таблицы происходят в одном и том же месте.

В шаблоне MVC, то М Odel удерживает свои данные, то V IEW делает его, а С ontroller управляет вашей логики, передавая данные из модели в вид, когда это необходимо. Шаблон проектирования MVC является прекрасным примером разделения различных аспектов функциональности программного обеспечения для лучшей поддержки программного обеспечения. Когда эти аспекты управляются и хорошо изолированы, вы не будете спотыкаться на такие соображения, как: «когда моя таблица сортируется».

Посмотрите на Backbone для очень модульной и легкой структуры MVC для javascript или в AngularJS или EmberJS для более амбициозных веб-приложений.

Смежные вопросы