first of all please notice, I'm new here and I'm not a program expert.
What I want: I made a stopwatch in JavaScript/HTML/CSS and it's working. Now I want to save the name which can be written in a textfield (HTML) and the time after I hit the save button into the table in the HTML file. But I would like to have sorted it by time.
My Problem: I can save the the names and times into the table. But I can't sort it directly after smashing the safe button. I'm not an expert and I never used JQuery. So, is there another way to sort this table immediately without any Plug-Ins?
Below you see the function which saves the time and the name into the table and after that set the time to 0.
I also added the code the fiddle: https://jsfiddle.net/dtq6o52h/
But please notice, that there is one file missing in fiddle (the main.js)
Unfortunately i don't know how to add a second file into js fiddle. The code for the main.js file you also can see below.
Thank you, regards
McMauser
Function from stopwatch.js
this.reset = function() {
var playername = document.getElementById("name").value;
var table = document.getElementsByTagName('table')[0];
//
var newRow = table.insertRow(1);
var cel1 = newRow.insertCell(0)
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
cel1.innerHTML = id;
cel2.innerHTML = playername;
cel3.innerHTML = timeFormatter(time);
id++;
time = 0;
update();
console.log(id);
};
this.isOn = false;
}
main.js
var timer = document.getElementById('timer');
var toggleBtn = document.getElementById('toggle');
var resetBtn = document.getElementById('reset');
var watch = new Stopwatch(timer);
function start() {
toggleBtn.textContent = 'Stop';
watch.start();
}
function stop() {
toggleBtn.textContent = 'Start';
watch.stop();
}
toggleBtn.addEventListener('click', function() {
watch.isOn ? stop() : start();
});
resetBtn.addEventListener('click', function() {
watch.reset();
});
So, is there another way to sort this table immediately without any Plug-Ins?
Yes! Click on headers to sort data:
(function(w) { w.data = [ { column1: "CCC", column2: "111", column3: "EEE" }, { column1: "AAA", column2: "BBB", column3: "CCC" } ]; w.sortData = function(columnName) { w.data = w.data.sort((a, b) => ((a[columnName] < b[columnName]) ? -1 : ((a[columnName] > b[columnName]) ? 1 : 0))); render(); } w.render = function() { var trs = data.map(a => `<tr><td>${a.column1}</td><td>${a.column2}</td><td>${a.column3}</td></tr>`).join(''); document.querySelector("#myTable tbody").innerHTML = trs; } })(window);
<table id="myTable"> <thead> <tr> <th onclick="sortData('column1');">Header 1</th> <th onclick="sortData('column2');">Header 2</th> <th onclick="sortData('column3');">Header 3</th> </tr> </thead> <tbody></tbody> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.