在没有JQuery的情况下，将创建的节点从JavaScript添加到HTML表中并将其排序？

Question

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

Answer 1

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>