0
私はアドレス帳を作成しているプロジェクトを進めています。入力したデータを表形式で表示しています。 reference image of output HTMLフォームフィールドから入力しているデータを並べ替える必要があります。以下は私のコードです。どのようにそれを行うにはどのようなアイデア。前もって感謝します。テーブルの内容を並べ替えるjavascript htmlのみ
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://stackoverflow.com/questions/44127125/js-html-how-to-sort-table-with-fixed-subrows/44136347#44136347 –