仅对表内容javascript html排序

Question

I am working a project in which I am making an address book. I am displaying the entered data in the form of a table. reference image of output I want to sort the data that I am entering through HTML form fields. Below is my code. Any idea how to do it. Thanks in advance.

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":"sachin@frameboxx.in","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();


}

Answer 1

If you don't have to consider server-side pagination of your data have a look at jquery tablesorter . Demo right here .

Simply add jquery as a dependency and initialize the tablesorter plugin on your table like so:

// 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();