Contoh dasar membuat absensi menggunakan table html

Contoh dasar membuat absensi menggunakan table html

by Adi Jaya

HTML

<h2 class="text-center">
    Daftar Hadir .....<br>
    Tahun .........
</h2>

<div class="table-wrapper">

    <table class="table-siswa">
        <thead>
            <tr>
                <td rowspan="2">No</td>
                <td rowspan="2">Nama</td>
                <td rowspan="2">L/P</td>
                <td rowspan="2">ID</td>
                <td colspan="31" class="text-center">Tanggal</td>
            </tr>
            <tr class="table-row-head">
            </tr>
          </thead>
          <tbody class="table-body-content">
            <tr data-id="001">
                <td>1</td>
                <td>Adi</td>
                <td>L</td>
                <td>001</td>
            </tr>
            <tr data-id="002">
                <td>2</td>
                <td>Budi</td>
                <td>L</td>
                <td>002</td>
            </tr>
            <tr data-id="003">
                <td>3</td>
                <td>Wati</td>
                <td>P</td>
                <td>003</td>
            </tr>
        </tbody>
    </table>


</div>

<h2>Keterangan</h2>

<ul>
    <li><span class="box-color green"></span> Hadir</li>
    <li><span class="box-color grey"></span> Tidak Hadir</li>
</ul>

CSS

.table-wrapper {
    overflow: auto;
}

.text-center {
    text-align: center;
}

.table-siswa, .table-date {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    padding: 0;
}

.table-siswa td {
    border: 1px solid silver;
    position: relative;
    padding: 5px;
}

.td-date .date {
    display: inline-block;
    width: 25px;
}

.label-checkbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    display: block;
    vertical-align: middle;
    background: #cecece;
}

.label-checkbox:hover {
    background: #bff8ff;
}

.label-checkbox input {
    margin: 0;
    -webkit-appearance: none;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    border: 0;
    cursor: pointer;
    outline: none;
}

.label-checkbox.active, .label-checkbox.active input, .label-checkbox input:checked {
    background: #0ab30a;
}


.box-color {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.box-color.green {
   background: green;
}

.box-color.grey {
   background: #cecece;
}

JavaScript

$(document).ready(function(){

	var tableDate = "";
    var tableContent =  "";
    var $label ="<label class='label-checkbox'><input type='checkbox'/></label>";
    
    for(var i=1; i<=31; i++){
		tableDate += "<td class='td-date text-center'><b class='date'>"+ i +"</b></td>";
	}
    
    $( tableDate ).appendTo( ".table-row-head" );
    

    for(var j=1; j<=31; j++){
		tableContent += "<td class='text-center' data-date='"+ j +"'>"+ $label +"</td>";
	}
 
    $( tableContent ).appendTo( ".table-body-content tr" );
    
    
    
    //alternative if browser not support css => input:checked 
    $( document ).on( "change", ".label-checkbox", function(){
    	$( this ).toggleClass( "active" );
    });
    
    
});


/*
var dataSiswa =[
	{
    	"id" : 001,
		"nama" : "Adi",
		"data" : [...]
	},
    {
    	"id" : 002,
        "nama" : "Budi",
		"data" : [....]
    },
    {
    	"id" : 003,
        "nama" : "Wati",
		"data" : [....]
    }
 ]
 */