JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<table class="table table-bordered ">
                <thead>
                <tr>
                    <th>#</th>
                    <th>No. Tempahan</th>
                    <th>Tarikh Pergi</th>
                    <th>Tarikh Balik</th>
                    <th>Destinasi</th>
                    <th>Status</th>
                    <th>Tindakan</th>
                </tr>
                </thead>
                <tbody>
                     <tr>
                        <td>1&nbsp;</td>
                        <td>8686024&nbsp;</td>
                        <td>21-11-2016 11:40 AM&nbsp;</td>
                        <td>21-11-2016 11:40 AM&nbsp;</td>
                        <td>Parlimen&nbsp;</td>
                        <td>Baru&nbsp;</td>
                        <td class="actions">
                            <a id="btn-1" href="#" class="btn btn-success btn-xs disabled">
                            <span class="glyphicon glyphicon-unchecked"></span>
                            </a>
                        </td>
                    </tr>
                                    <tr>
                        <td>2&nbsp;</td>
                        <td>994583&nbsp;</td>
                        <td>21-11-2016 11:40 AM&nbsp;</td>
                        <td>21-11-2016 11:40 AM&nbsp;</td>
                        <td>Parlimen&nbsp;</td>
                        <td>Baru&nbsp;</td>
                        <td class="actions">
                            <a id="btn-2" href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-unchecked"></span></a>
                        </td>
                    </tr>
                                    <tr>
                        <td>3&nbsp;</td>
 ...

JavaScript

//Setiap action bila click icon
var url = "http://projek/peserta/checklist/";
$(".btn").on('click', function() {
  var btn = $(this).attr("id");
  var btnVal = btn.split("-")[1];

  if ($(this).attr('class') !== "btn btn-success btn-xs") {
    alert("Check id#" + btnVal +
      " dan update ke " + url +
      " status ke database");
    //LINE NI AKAN WUJUDKAN AJAX ke controller
    //Ajax ni kita akan hantar id peserta dan flag TRUE utk
    //bg tau di database yg data tu dah semak

    /* Ni cth code
    $.post(url,{ id-peserta: btnVal, status: 1 })
    .done(function( data ) {
      alert( "Data Saved");
    });
    */
    //Code ni kite ubah bentuk icon tanpa refresh page
    $(this)
      .removeClass('btn btn-default btn-xs')
      .addClass('btn btn-success btn-xs disabled');

  }
});