<!DOCTYPE html>
<html>
<head>
<title>דוח כספים</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-size: 19px;
background-color: transparent;
direction: rtl;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #666;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr,
th,
td {
color: #ffffff;
}
h2 {
color: #000;
text-align: center;
}
</style>
</head>
<body>
<table id="revenueTable">
<thead>
<h3>הכנסות</h3>
</thead>
<tbody id="revenueBody">
</tbody>
</table>
<br>
<table id="expenseTable">
<thead>
<h3>הוצאות</h3>
</thead>
<tbody id="expenseBody">
</tbody>
</table>
<script>
const jsonString = `{
"revenues": [
{"description": "גביית דמי וועד", "amount": "36,180 ש״ח"},
{"description": "מועדון דיירים", "amount": "150 ש״ח"},
{"description": "תחנות טעינה חשמליות", "amount": "1,220 ש״ח"}
],
"expenses": [
{"description": "חברת ניהול", "amount": "26,000 ש״ח"},
{"description": "עמלת בנק וחברת אשראי", "amount": "330 ש״ח"},
{"description": "חשבון חשמל עבור חודש יולי", "amount": "9,281 ש״ח"},
{"description": "הגברת אינטרנט בחניון", "amount": "2,574 ש״ח"},
{"description": "הדברת מכרסמים", "amount": "1,170 ש״ח"},
{"description": "פרטנר", "amount": "124 ש״ח"}
]
}`;
const data = JSON.parse(jsonString);
function populateTable(tableBodyId, items, keys) {
const tableBody = document.getElementById(tableBodyId);
items.forEach(item => {
const row = document.createElement('tr');
keys.forEach(key => {
const cell = document.createElement('td');
cell.textContent = item[key];
row.appendChild(cell);
});
tableBody.appendChild(row);
});
}
populateTable('revenueBody', data.revenues, ['description', 'amount']);
populateTable('expenseBody', data.expenses, ['description', 'amount']);
</script>
</body>
</html>