JSFiddle - React, Tailwind, and code Playground

by Kevin Van Lierde

HTML

<input type="text" id="edit-submitted-data-cursus">
<input type="text" id="edit-submitted-data-cursusdatum">
<input type="text" id="edit-submitted-data-opleidingscode">
<input type="text" id="edit-submitted-data-cursuslocatie">
<input type="text" id="edit-submitted-data-cursustarief">
<table class="product">
    <tr>
        <td><button type="button" class="knop">Bestel</button></td>
        <td class="cursus">Een cursus</td>
        <td class="datum"><a href="#">00/00/00</a></td>
        <td class="code">2849324</td>
        <td class="loc">Nederland</td>
        <td class="tarief">50 euro</td>
    </tr>
    <tr>
        <td><button type="button" class="knop">Bestel</button></td>
        <td class="cursus">Een andere cursus</td>
        <td class="datum"><a href="#">33/00/00</a></td>
        <td class="code">555</td>
        <td class="loc">België</td>
        <td class="tarief">80 euro</td>
    </tr>
</table>

JavaScript

var selCursus = document.getElementById('edit-submitted-data-cursus'),
    selDatum  = document.getElementById('edit-submitted-data-cursusdatum'),
    selCode   = document.getElementById('edit-submitted-data-opleidingscode'),
    selLoc    = document.getElementById('edit-submitted-data-cursuslocatie'),
    selTarief = document.getElementById('edit-submitted-data-cursustarief'),
    table =  document.getElementsByClassName('product')[0];

function getCursus(e) {
  var tr, td;
  if ( e.target.className.match('knop') ) {
    tr = e.target.parentNode.parentNode; // button > td > tr
    td = tr.getElementsByTagName('td');
    for ( var i = 0; i < td.length; i++ ) {
      switch(td[i].className) {
       case 'cursus':
       selCursus.value = td[i].innerHTML;
       break;
       case 'datum':
       selDatum.value = td[i].getElementsByTagName('a')[0].innerHTML;
       break;
       case 'code':
       selCode.value = td[i].innerHTML;
       break;
       case 'loc':
       selLoc.value = td[i].innerHTML;
       break;
       case 'tarief':
       selTarief.value = td[i].innerHTML;
       break;
      }
    }
  }
}
table.addEventListener('click', getCursus, false);