CyborgBeta
Commander
- Registriert
- Jan. 2021
- Beiträge
- 2.937
Huhu, kann man (mithilfe von JavaScript) die Spalten einer HTML-Tabelle durch Drag-and-drop verschiebbar machen?
Zurzeit sieht der Code so aus:
Der Benutzer soll die Möglichkeit haben, die Eingabesäule an einen beliebigen Platz zu ziehen.
Zurzeit sieht der Code so aus:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Tabelle</title>
<style>
table,
th,
td {
border: solid black 1px;
}
td {
width: 125px;
}
main {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<header></header>
<main>
<div id="div-1"></div>
<br />
<div>
<button
id="button-1"
onclick="(function (btn) {
btn.disabled = true;
let t = new Date();
t.setSeconds(t.getSeconds() + 30);
let inter = setInterval(function() {
let t2 = new Date();
if (t2 < t) {
btn.textContent = 'Kurse aktualisieren! (' + Number((t - t2) / 1000.0).toFixed(1) + ')';
} else {
clearInterval(inter);
btn.textContent = 'Kurse aktualisieren!';
btn.disabled = false;
}
}, 100);
initTable();
})(this);
return false;"
>
Kurse aktualisieren!
</button>
</div>
<br />
<table id="table-1">
<tr>
<th>Coin</th>
<th>Betrag</th>
<th>Betrag $</th>
<th>Kurs</th>
<th>Betrag Neu</th>
</tr>
</table>
</main>
<footer></footer>
<script>
async function getPrices() {
const response1 = await fetch("https://api.livecoinwatch.com/coins/list", {
method: "POST",
headers: {
"content-type": "application/json",
"x-api-key": "geheim",
},
body: JSON.stringify({
currency: "USD",
sort: "rank",
order: "ascending",
offset: 0,
limit: 100,
meta: false,
}),
});
const jsonData1 = await response1.json();
console.log(jsonData1);
return jsonData1;
}
/**
* @param {array} data
* @param {object} tableRow
* @param {String} name
* @param {Number} rate
*/
function dataPush(data, tableRow, name, rate) {
data.push({
tableRow: tableRow,
name: name,
rate: rate,
});
}
/**
* @param {array} data
*/
function tablePush(data) {
data.forEach((d) => {
let row = d.tableRow;
{
let c = row.insertCell(0);
c.textContent = d.name;
}
{
let c = row.insertCell(1);
c.textContent = round10(d.rate);
}
{
let c = row.insertCell(2);
c.textContent = round10(d.rate);
}
{
let c = row.insertCell(3);
c.textContent = round10(d.rate);
}
{
let c = row.insertCell(4);
let inp = document.createElement("input");
inp.addEventListener("input", function (evt) {
if (this.value.length > 0 && Number(this.value) === parseFloat(this.value)) {
let amount = parseFloat(this.value);
let usdAmount = amount * d.rate;
data[0].tableRow.cells[1].textContent = round10(usdAmount);
data[0].tableRow.cells[2].textContent = round10(usdAmount);
for (let i = 1; i < data.length; i++) {
let row2 = data[i].tableRow;
let rate2 = data[i].rate;
row2.cells[1].textContent = round10(usdAmount / rate2);
row2.cells[2].textContent = round10(usdAmount);
}
}
});
c.appendChild(inp);
}
});
}
/**
* @param {Number} value
*/
function round10(value) {
return Number(value).toFixed(10);
}
async function initTable() {
let table = document.getElementById("table-1");
for (let i = table.rows.length - 1; i > 0; i--) {
table.deleteRow(i);
}
let data = [];
dataPush(data, table.insertRow(), "$", 1.0);
(await getPrices()).forEach((p) => {
dataPush(data, table.insertRow(), p.code.replaceAll("_", ""), parseFloat(p.rate));
});
tablePush(data);
document.getElementById("div-1").textContent = "Stand: " + new Date();
}
initTable();
</script>
</body>
</html>Der Benutzer soll die Möglichkeit haben, die Eingabesäule an einen beliebigen Platz zu ziehen.
