对表格内容进行排序javascript html only

问题描述：

我正在开发一个项目，我正在制作地址簿。我正在以表格的形式显示输入的数据。 reference image of output我想对通过HTML表单域输入的数据进行排序。以下是我的代码。任何想法如何去做。提前致谢。对表格内容进行排序javascript html only

window.onload = function(){ 

// Buttons 
var quickAddBtn = document.getElementById('QuickAdd'); 
var quickAddFormDiv = document.querySelector('.quickaddForm') 
var cancelBtn = document.getElementById('Cancel'); 
var AddBtn = document.getElementById('Add'); 
// Form Fields 
var lastname = document.getElementById('lastname'); 
var firstname = document.getElementById('firstname'); 
var email = document.getElementById('email'); 
var speaciality = document.getElementById('speaciality'); 
var practicename = document.getElementById('practicename'); 
// Divs etc. 
var addBookDiv = document.querySelector('.addbook2'); 
quickAddFormDiv.style.display = "block"; 

localStorage.clear(); 
AddBtn.addEventListener("click", addToBook); 

addBookDiv.addEventListener("click", removeEntry); 

// Storage Array 
var addressBook = []; 

//localStorage['addbook'] = '[{"lastname":"Sachin B","practicename":"[email protected]","firstname":"93828292","email":"something","speaciality":"Chandigarh"}]'; 

function jsonStructure(lastname,firstname,email,speaciality,practicename){ 
    this.lastname = lastname; 
    this.lastname += ", "+firstname; 
    //this.firstname = firstname; 
    this.email = email; 
    this.speaciality = speaciality; 
    this.practicename = practicename; 
} 

function addToBook(){ 
    var isNull = lastname.value!='' && firstname.value!='' && email.value!='' && speaciality.value!='' && practicename.value!=''; 
    if(isNull){ 
     // format the input into a valid JSON structure 
     var obj = new jsonStructure(lastname.value,firstname.value,email.value,speaciality.value,practicename.value); 
     console.log(obj); 
     addressBook.push(obj); 
     localStorage['addbook2'] = JSON.stringify(addressBook); 
     console.log(localStorage['addbook2']); 
     //quickAddFormDiv.style.display = "none"; 
     clearForm(); 
     showaddressBook(); 
    } 
} 


function removeEntry(e){ 
    // Remove an entry from the addressBook 
    if(e.target.classList.contains('delbutton')){ 
     var remID = e.target.getAttribute('data-id'); 
     addressBook.splice(remID,1); 
     localStorage['addbook2'] = JSON.stringify(addressBook); 
     showaddressBook(); 
    } 
} 

function clearForm(){ 
    var formFields = document.querySelectorAll('.formFields'); 
    for(var i in formFields){ 
     formFields[i].value = ''; 
    } 
} 

function showaddressBook(){ 
    if(localStorage['addbook2'] === undefined){ 
     localStorage['addbook2'] = ''; 
    } else { 
     addressBook = JSON.parse(localStorage['addbook2']); 
     // Loop over the array addressBook and insert into the page 
     var str = '<table>'+'<div id="heading">'+'<th>'+'<tr>'+'<td id="hName">Name</td>'+'<td id="hEmail">Email</td>'+ 
       '<td id="hPracticeName">Practice Name</td>'+ 
       '<td id="hSpecialty">Specialty</td>'+ 
       '<td id="hDel"></td>'+'</tr>'+'</div>'+'</th>'; 
     addBookDiv.innerHTML = ''; 
     for(var n in addressBook){ 
      str += '<tr>'; 
       str += '<td><div class="lastname"><p>' + addressBook[n].lastname + '</p></div></td>';     
       str += '<td class="email"><p>' + addressBook[n].email + '</p></td>'; 
       str += '<td class="practicename"><p>' + addressBook[n].practicename + '</p></td>';     
       str += '<td class="specialty"><p>' + addressBook[n].speaciality + '</p></td>'; 
       str += '<td class="del"><a href="#" class="delbutton" data-id="' + n + '">Delete</a></td>'; 
       str += '</tr>'; 
      //addBookDiv.innerHTML += str; 
      document.getElementsByClassName("addbook2")[0].innerHTML = str; 
      console.log(str); 
     } 
    } 
} 

showaddressBook(); 


}

现在已经有很多的这样的问题。我已经回答了一些已经https://*.com/questions/44127125/js-html-how-to-sort-table-with-fixed-subrows/44136347#44136347 –

答

如果你没有考虑你的数据在服务器端分页看看jQuery的tablesorter。演示权利here。

只需添加的jQuery的依赖和初始化你的桌子上的tablesorter插件像这样：

// in the <head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="path/to/your/tablesorter.js"></script> 

// right after calling showaddressBook() 
$("table").tablesorter();

如何将该代码添加到我的JavaScript代码？因为这是在jQuery中？ –

看看更新的答案:) –

我试过这个，但仍然没有得到输出。你能看看我的代码吗？我已附加到所有文件的链接。谢谢in advance.index.html =“http://chopapp.com/#rbdllc5l”，addressbook.css =“http://chopapp.com/#rbdllc5l”，addressbook.js =“http://chopapp.com /＃lv61mafk“ –

对表格内容进行排序javascript html only

相关推荐