JSFiddle - React, Tailwind, and code Playground

by svierkant

HTML

<table id="scheefwoontool">
    <thead>
        <tr>
            <th></th>
            <th>Woningen</th>
            <th>Corporatie</th>
            <th>Particuliere huur</th>
            <th>Koop</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Totaal</th>
            <th>5540</th>
            <th>1355</th>
            <th>265</th>
            <th>3920</th>
        </tr>
    </thead>
    <tbody>
        <tr id="inkomen_33000">
            <td>33.000</td>
            <td>2240</td>
            <td>1085</td>
            <td>140</td>
            <td>1015</td>
        </tr>
        <tr id="inkomen_38000">
            <td>38.000</td>
            <td>400</td>
            <td>90</td>
            <td>20</td>
            <td>290</td>
        </tr>
        <tr id="inkomen_43000">
            <td>43.000</td>
            <td>260</td>
            <td>35</td>
            <td>10</td>
            <td>215</td>
        </tr>
        <tr id="inkomen_43001">
            <td>43.001</td>
            <td>2640</td>
            <td>145</td>
            <td>95</td>
            <td>2400</td>
        </tr>
    </tbody>
</table>

<table id="scheefwoners">
    <caption>Scheefwoners</caption>
    <thead>
        <tr>
            <th></th>
            <th>Absoluut</th>
            <th>Relatief</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Goedkope scheefheid €33.000-43.000 (wal&amp;schip)</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Goedkope scheefheid € >43.000</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Totaal goedkope scheefheid</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Dure scheefheid (<€33.000 in een part. huurwoning)</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

<table id="vraag">
    <caption>Vraag sociale huur</caption>
    <thead>
        <tr>
     ...

JavaScript

function updateTable(regio)
{
    var data = {"regiocode":"53","regioletter":"G","regionaam":"Winsum","eigen":"3920","corporatie":"1355","particulier":"265","totaal":"5540","woningen":{"33000":{"id":"24","inkomen":"33000","regio":"53","eigen":1015,"corporatie":1085,"particulier":140,"totaal":2240},"38000":{"id":"442","inkomen":"38000","regio":"53","eigen":290,"corporatie":90,"particulier":20,"totaal":400},"43000":{"id":"860","inkomen":"43000","regio":"53","eigen":215,"corporatie":35,"particulier":10,"totaal":260},"43001":{"totaal":2640,"eigen":2400,"corporatie":145,"particulier":95}}};
        
    //totaalrij
    $('#scheefwoontool tfoot tr th:eq(1)').html(data.totaal);
    $('#scheefwoontool tfoot tr th:eq(2)').html(data.corporatie);
    $('#scheefwoontool tfoot tr th:eq(3)').html(data.particulier);
    $('#scheefwoontool tfoot tr th:eq(4)').html(data.eigen);
    
    //per inkomensgroep
    $.each(data.woningen, function(index, item) {
        $('#inkomen_' + index + ' td:eq(1)').html(item.totaal);
        $('#inkomen_' + index + ' td:eq(2)').html(item.corporatie);
        $('#inkomen_' + index + ' td:eq(3)').html(item.particulier);
        $('#inkomen_' + index + ' td:eq(4)').html(item.eigen);
    });
    
    //scheefwoners
    $goedkope_scheefwoon1 = data.woningen[38000].corporatie + data.woningen[43000].corporatie;
    $goedkope_scheefwoon2 = data.woningen[43001].corporatie;
    $('#scheefwoners tbody tr:eq(0) td:eq(1)').html($goedkope_scheefwoon1);
    $('#scheefwoners tbody tr:eq(1) td:eq(1)').html($goedkope_scheefwoon2);
    
    $('#scheefwoners tbody tr:eq(2) td:eq(1)').html($goedkope_scheefwoon1 + $goedkope_scheefwoon2);
    $('#scheefwoners tbody tr:eq(3) td:eq(1)').html(data.woningen[33000].particulier);
    
    
    $('#scheefwoners tbody tr:eq(0) td:eq(2)').html($goedkope_scheefwoon1 / data.corporatie * 100);
    
    $('#scheefwoners tbody tr:eq(1) td:eq(2)').html($goedkope_scheefwoon2 / data.corporatie * 100);
    $('#scheefwoners tbody...