javascript - 将创建的节点从 JavaScript 添加和排序到没有 JQuery 的 HTML 表中？

Question

首先请注意，我是新来的，我不是程序专家。

我想要什么：我用 JavaScript/HTML/CSS 制作了一个秒表，它正在工作。现在我想保存可以写在文本字段（HTML）中的名称以及我点击保存按钮到 HTML 文件中的表格后的时间。但我想按时间排序。

我的问题：我可以将名称和时间保存到表中。但是我按安全键后不能直接排序。我不是专家，我从未使用过 JQuery。那么，是否有另一种方法可以在不使用任何插件的情况下立即对该表进行排序？

下面你会看到将时间和名称保存到表中的函数，然后将时间设置为 0。

我还添加了小提琴代码：https ://jsfiddle.net/dtq6o52h/

但请注意，小提琴中缺少一个文件（main.js）

不幸的是，我不知道如何将第二个文件添加到 js fiddle 中。您还可以在下面看到 main.js 文件的代码。

谢谢，问候

麦克毛瑟

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

标签： javascripthtml

Answer 1

那么，是否有另一种方法可以在不使用任何插件的情况下立即对该表进行排序？

是的！点击标题对数据进行排序：

(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>