JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<table id="tutorTable">
    <thead>
        <tr>
            <th>Student Name</th>
            <th>Attendance</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td id="studentName">Ellen Murley</td>
        <td>
            <select class="attendSelect" id="241">
                <option value="default">Select...</option><option value="Attended">Attended</option>
                <option value="Absent">Absent</option><option value="Excused Absent">Excused Absent</option>
                <option value="Late" selected="selected">Late</option>
                <option value="Excused Late">Excused Late</option>
            </select>
        </td>
    </tr>
    <tr>
        <td id="studentName">Jamie Hoare</td>
        <td>
            <select class="attendSelect" id="270">
                <option value="default">Select...</option>
                <option value="Attended">Attended</option>
                <option value="Absent" selected="selected">Absent</option>
                <option value="Excused Absent">Excused Absent</option>
                <option value="Late">Late</option>
                <option value="Excused Late">Excused Late</option>
            </select>
        </td>
    </tr>
    <tr>
        <td id="studentName">Aaron Colman</td>
        <td>
            <select class="attendSelect" id="317">
                <option value="default" selected="selected">Select...</option>
                <option value="Attended">Attended</option>
                <option value="Absent">Absent</option>
                <option value="Excused Absent">Excused Absent</option>
                <option value="Late">Late</option>
                <option value="Excused Late">Excused Late</option>
            </select>
        </td>
    </tr>
    </tbody>
</table>
<button id="saveAttendances">Save</button>

JavaScript

$('#saveAttendances').click( function()
{
    var $attendSelect  = $('#tutorTable tbody tr select');
    var students = {};
    
    $attendSelect.each (function () { //each row corresponds to a student               
        students[$(this).attr('id')] = $(this).val();
    });    
    
    //after retrieving values, post them through ajax
    // and update the attendances of students in PHP
    $.post("",{ data: students}, function(msg)
    {
        alert(students['241'] + ' ' + students['270'] + ' ' + students['317']);
    }); 

});