124 lines
3.4 KiB
HTML
124 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ćwiczenie 1</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
color: white;
|
|
font-family: monospace;
|
|
}
|
|
|
|
body {
|
|
background-color: rgb(40, 40, 45);
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
font-size: 2em;
|
|
background-color: cornflowerblue;
|
|
padding: 1em;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: purple;
|
|
cursor: pointer;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
div {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
table {
|
|
margin: 0 auto;
|
|
font-size: 2em;
|
|
}
|
|
|
|
th {
|
|
padding: 1em;
|
|
border: 1px solid white;
|
|
background-color: gray;
|
|
}
|
|
|
|
td {
|
|
padding: 1em;
|
|
border: 1px solid white;
|
|
background-color: darkslategray;
|
|
}
|
|
</style>
|
|
<script src="lib/jquery.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
const data = {
|
|
header: {
|
|
lps: ["lp", "cena", "produkt"],
|
|
},
|
|
products: {
|
|
prices: ["5,60", "3,23", "7,45", "10,00", "3,20", "9,22"],
|
|
names: ["chleb", "mąka", "masło", "kefir", "dżem", "inne"]
|
|
}
|
|
}
|
|
|
|
$("#generuj").on("click", function () {
|
|
const tabela = $("<table>")
|
|
|
|
let sum = 0
|
|
|
|
for (let i = 0; i < data.products.prices.length + 1; i++) {
|
|
const row = $("<tr>")
|
|
|
|
for (let j = 0; j < data.header.lps.length; j++) {
|
|
if (i == 0) {
|
|
const hdr = $("<th>").text(data.header.lps[j])
|
|
row.append(hdr)
|
|
} else {
|
|
const td = $("<td>")
|
|
switch (j) {
|
|
case 0:
|
|
td.text(i)
|
|
break
|
|
case 1:
|
|
td.text(data.products.prices[i - 1])
|
|
sum += parseFloat(data.products.prices[i - 1].replace(',', '.'))
|
|
break
|
|
case 2:
|
|
td.text(data.products.names[i - 1])
|
|
break
|
|
}
|
|
row.append(td)
|
|
}
|
|
}
|
|
|
|
tabela.append(row)
|
|
}
|
|
|
|
const row_suma = $("<tr>")
|
|
const suma = $("<td>").attr("colspan", 2).text("suma")
|
|
const suma_val = $("<td>").text(`${sum.toFixed(2)}`.replace('.', ','))
|
|
|
|
row_suma.append(suma)
|
|
row_suma.append(suma_val)
|
|
tabela.append(row_suma)
|
|
|
|
$("#d1").append(tabela)
|
|
})
|
|
})
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Tabela html - tablice</h1>
|
|
<div><button id="generuj">Generuj tabelę</button></div>
|
|
<div id="d1"></div>
|
|
</body>
|
|
|
|
</html> |