Forum - Nochmal Tabellen im Forum

<style>
.exel_tab {overflow:auto; width:1200px; margin:5px 0px; border:1px solid #777777;} 
.exel_tab td, .exel_tab th {padding: 10px; max-width:200px; min-width: 100px; background-color:#eeeeee; color:#111111; vertical-align: middle !important; vertical-align: baseline !important;}
 
.exel_tab td:empty::before {content: 'Eingabe'; opacity:0.6; font-size:12px;}
.exel_tab td:focus::before {content: '';}
 
.exel_tab .MautTitel {background-color:#aaaaaa;}
.exel_tab .MautSignatur {background-position: center; height: 90px; background-image: url(https://files.homepagemodules.de/b104774/a_650_aa6cb60f.gif); background-size: contain; background-repeat: no-repeat; }
.mautb.button {margin:5px 20px 20px 20px;}
</style>
 
<br>
<table class="exel_tab" border="1">
 
<!-- Überschrift -->
<tr><th colspan="10" class="MautTitel"><h1>Kalkulator für die Maut- und Frachtpreiserhöhung zum 01.12.2023 - (Basis: 5 Achsen)</h1></th></tr>
 
<!-- Titel -->
<tr style="background: #bbbbbb;">
<th><h4>Euro-Schadstoffklasse</h4></th>
<th style="background: #ffffff;"><h4>Maut (km)</h4></th>
<th><h4>Maut alt (€)</h4></th>
<th><h4><b>Maut neu (€)</h4></th>
<th><h4>Erhöhung (€)</h4></th>
<th style="background: #ffffff;"><h4>Frachtpreis alt (€)</h4></th>
<th style="background: #ffffff;"><h4>allg. Erhöhung (%)</h4></th>
<th><h4>Frachtpreis neu (€)</h4></td>
</tr>
 
<!-- Zeile 1 -->
<tr>
<td id="spalte11">Euro 6 Emissionskl. 3 (0,332 €/km)</td>
<td id="spalte12" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte13"></td>
<td id="spalte14"></td>
<td id="spalte15"></td>
<td id="spalte16" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte17" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte18"></td>
</tr>
 
<!-- Zeile 2 -->
<tr>
<td id="spalte21">Euro 6 Emissionskl. 2 (0,340 €/km)</td>
<td id="spalte22" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte23"></td>
<td id="spalte24"></td>
<td id="spalte25"></td>
<td id="spalte26" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte27" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte28"></td>
</tr>
 
<!-- Zeile 3 -->
<tr>
<td id="spalte31">Euro 6 Emissionskl. 1 (0,348 €/km)</td>
<td id="spalte32" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte33"></td>
<td id="spalte34"></td>
<td id="spalte35"></td>
<td id="spalte36" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte37" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte38"></td>
</tr>
 
<!-- Zeile 4 -->
<tr>
<td id="spalte41">Euro 5 Emissionskl. 1 (0,389 €/km)</td>
<td id="spalte42" contenteditable style="background: #ffffff; cursor: pointer; vertical-align: middle;"></td>
<td id="spalte43"></td>
<td id="spalte44"></td>
<td id="spalte45"></td>
<td id="spalte46" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte47" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte48"></td>
</tr>
 
<!-- Zeile 5 -->
<tr>
<td id="spalte51">Euro 3 Emissionskl. - (0,478 €/km)</td>
<td id="spalte52" contenteditable style="background: #ffffff; cursor: pointer; vertical-align: middle;"></td>
<td id="spalte53"></td>
<td id="spalte54"></td>
<td id="spalte55"></td>
<td id="spalte56" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte57" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte58"></td>
</tr>
 
<!-- Zeile 6 -->
<tr>
<td id="spalte61">Euro 0 Emissionskl. - (0,516 €/km)</td>
<td id="spalte62" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte63"></td>
<td id="spalte64"></td>
<td id="spalte65"></td>
<td id="spalte66" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte67" contenteditable style="background: #ffffff; cursor: pointer;"></td>
<td id="spalte68"></td>
</tr><tr>
<th colspan="10" class="MautSignatur"></th>
</tr>
</table>
 
<!-- Lösch-Button -->
<input type="button" name="maut" value="Speicher löschen" class="button mautb" onclick="localStorage.clear(); location.reload();">
<br>
<h5>Die Kalkulationstabelle wurde mit bestem Wissen und Gewissen programmiert. Für die Richtigkeit kann jedoch keine Gewähr übernommen werden!</h5>
<a href="https://www.hilfe-tricks-tipps.de/" style="float:left;">Erstellt durch Arndt Richter © Hilfe, Tricks & Tipps</a>
<br>
 

<!-- <script src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script>
window.addEventListener('load', function(){
 
function mautCal(){
 
// Werte aus der Tabelle auslesen
var num12 = $("#spalte12").text().replace(/,/g, '.');
var num16 = $("#spalte16").text().replace(/,/g, '.'); 
var num17 = $("#spalte17").text().replace(/,/g, '.');
 
var num22 = $("#spalte22").text().replace(/,/g, '.');
var num26 = $("#spalte26").text().replace(/,/g, '.');
var num27 = $("#spalte27").text().replace(/,/g, '.');
 
var num32 = $("#spalte32").text().replace(/,/g, '.');
var num36 = $("#spalte36").text().replace(/,/g, '.');
var num37 = $("#spalte37").text().replace(/,/g, '.');
 
var num42 = $("#spalte42").text().replace(/,/g, '.');
var num46 = $("#spalte46").text().replace(/,/g, '.');
var num47 = $("#spalte47").text().replace(/,/g, '.');
 
var num52 = $("#spalte52").text().replace(/,/g, '.');
var num56 = $("#spalte56").text().replace(/,/g, '.');
var num57 = $("#spalte57").text().replace(/,/g, '.');
 
var num62 = $("#spalte62").text().replace(/,/g, '.');
var num66 = $("#spalte66").text().replace(/,/g, '.');
var num67 = $("#spalte67").text().replace(/,/g, '.');
 
// Zeile 1
var math11 = Math.round((num12 * 0.19)*100) / 100;
$('#spalte13').text(math11);
 
var math12 = Math.round((num12 * 0.332)*100) / 100;
$('#spalte14').text(math12);
 
var math13 = Math.round((math12 - math11)*100) / 100;
$('#spalte15').text(math13);
 
var math14 = Math.round((num17 * num16/100)*100) / 100;
 
var summe11 = Math.round((math13*1 + math14*1 + num16*1)*100) / 100;
$('#spalte18').text(summe11);
 

 
// Zeile 2
var math21 = Math.round((num22 * 0.19)*100) / 100;
$('#spalte23').text(math21);
 
var math22 = Math.round((num22 * 0.34) * 100) / 100;
$('#spalte24').text(math22);
 
var math23 = Math.round((math22 - math21) * 100) / 100;
$('#spalte25').text(math23);
 
var math24 = Math.round((num27 * num26/100)*100) / 100;
 
var summe21 = Math.round((math23*1 + math24*1 + num26*1)*100) / 100;
$('#spalte28').text(summe21);
 
 
// Zeile 3
var math31 = Math.round((num32 * 0.19)*100) / 100;
$('#spalte33').text(math31);
 
var math32 = Math.round((num32 * 0.348) * 100) / 100;
$('#spalte34').text(math32);
 
var math33 = Math.round((math32 - math31) * 100) / 100;
$('#spalte35').text(math33);
 
var math34 = Math.round((num17 * num16/100)*100) / 100;
 
var summe31 = Math.round((math33*1 + math34*1 + num36*1)*100) / 100;
$('#spalte38').text(summe31);
 
// Zeile 4
var math41 = Math.round((num42 * 0.229)*100) / 100;
$('#spalte43').text(math41);
 
var math42 = Math.round((num42 * 0.389) * 100) / 100;
$('#spalte44').text(math42);
 
var math43 = Math.round((math42 - math41) * 100) / 100;
$('#spalte45').text(math43);
 
var math44 = Math.round((num47 * num46/100)*100) / 100;
 
var summe41 = Math.round((math43*1 + math44*1 + num46*1)*100) / 100;
$('#spalte48').text(summe11);
 
// Zeile 5
var math51 = Math.round((num52 * 0.316)*100) / 100;
$('#spalte53').text(math51);
 
var math52 = Math.round((num52 * 0.478) * 100) / 100;
$('#spalte54').text(math52);
 
var math53 = Math.round((math52 - math51) * 100) / 100;
$('#spalte55').text(math53);
 
var math54 = Math.round((num17 * num16/100)*100) / 100;
 
var summe51 = Math.round((math53*1 + math54*1 + num56*1)*100) / 100;
$('#spalte58').text(summe51);
 
// Zeile 6
var math61 = Math.round((num62 * 0.354)*100) / 100;
$('#spalte63').text(math61);
 
var math62 = Math.round((num62 * 0.516) * 100) / 100;
$('#spalte64').text(math62);
 
var math63 = Math.round((math62 - math61) * 100) / 100;
$('#spalte65').text(math63);
 
var math64 = Math.round((num67 * num66/100)*100) / 100;
 
var summe61 = Math.round((math63*1 + math64*1 + num66*1)*100) / 100;
$('#spalte68').text(summe61);
 
};
mautCal();
 
// Berechnung nach jedem  Tastenanschlag
$('.exel_tab td').on('keyup', function(){
  mautCal();
});
 
});
 

const editables = document.querySelectorAll("[contenteditable]");
 
// Speichern der Einträge
editables.forEach(el => {
  el.addEventListener("blur", () => {
    localStorage.setItem("dataStorage-" + el.id, el.innerHTML);
  })
});
 
// Laden der gespeicherten Einträge
for (var key in localStorage) {
  if (key.includes("dataStorage-")) {
    const id = key.replace("dataStorage-","");
    document.querySelector("#" + id).innerHTML = localStorage.getItem(key);
  }
}
</script>