Tampilkan postingan dengan label jquery. Tampilkan semua postingan
Tampilkan postingan dengan label jquery. Tampilkan semua postingan

Senin, 05 Juni 2017

Mengambil nilai data dari Attribute HTML dengan javascript / jquery

Kali contoh ini kita akan mengambil nilai ditombol edit pada tabel

<button class="btn btn-success btn-xs" data-target="#myModal" data-toggle="modal" id_daftar="2" nilai="90.55,90.00,70.40,75.5" onclick="edit(this)" type="button"><i class="fa fa-check"></i>edit</button>

Data yang akan di ambil adalah data attribute id_dafta dan nilai pada attibute button edit dan memasukan kedalam field input.

berikut contohnya



berikut script lengkapnya
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  </head>
<body>

           

          <script>
    function edit(get){
    var id_daftar = $(get).attr("id_daftar");
    var nilai = $(get).attr("nilai");
    $("#id_daftar").val(id_daftar);
 
    var res = nilai.split(",");
     $("#mat").val(res[0]);
     $("#b_ind").val(res[1]);
     $("#b_eng").val(res[2]);
     $("#ipa").val(res[3]);
 
   nilai_rata_rata();
 
    }
          function nilai_rata_rata(){
 
             var rata_rata = 0;
var id_daftar =  $("#id_daftar").val();;
             $(".hitung").each(function(){
                     var get_textbox_value = $(this).val();
         
                     if ($.isNumeric(get_textbox_value)) {
                        rata_rata += parseFloat(get_textbox_value);
                        }             
             });
             var n = rata_rata / $(".hitung").length;

             var pembulatan_nilai_rata_rata=n.toFixed(2);
             $("#n_rata_rata").val(pembulatan_nilai_rata_rata);
 
    if(parseFloat(pembulatan_nilai_rata_rata) > 65.00){
     $("#status_lulus").val("Lulus Sementara");
     $("#status_"+id_daftar).html("Lulus Sementara");
    }else{
     $("#status_lulus").val("Ditolak");
     $("#status_"+id_daftar).html("Ditolak");
    } 
             }

          $(document).ready(function(){
              $(".hitung").keyup(function(){
                   nilai_rata_rata();
              });
          });
             nilai_rata_rata();
            </script>
<table class="table table-bordered table-striped" id="example1">
                <thead>
                <tr>
                  <th>No</th>
                  <th>Nama</th>
                  <th>Tempat Tanggal Lahir</th>
                  <th>Sekolah Asal</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
    <tr>
                  <td>1</td>
                  <td>anton</td>
                  <td>Bandung 20-01-2011</td>
                  <td>Smp 1</td>
                  <td id="status_1" align="center" class="bold"><span style="color: red">Ditolak</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="1" nilai="80.55,70.00,80.40,80.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>
    <tr>
                  <td>2</td>
                  <td>agus</td>
                  <td>Banjar 04-04-2011</td>
                  <td>Smp 2</td>
                  <td id="status_2" align="center" class="bold"><span style="color: red">Lulus Sementara</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="2" nilai="90.55,90.00,70.40,75.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>
   
    <tr>
                  <td>3</td>
                  <td>agus</td>
                  <td>Bandung 02-02-2011</td>
                  <td>Smp 3</td>
                  <td id="status_3" align="center" class="bold"><span  style="color: red">Lulus Sementara</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="3" nilai="60.55,90.00,90.40,90.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>   
                </tbody>
              </table>   
 

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Mengambil nilai data dari Attribute HTML </h4>
      </div>
      <div class="modal-body">
   <div class="row">
    <form class="form-horizontal">

<div class="col-sm-7">
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">ID daftar </label>
    <div class="col-sm-4">
      <input type="text" class="form-control " id="id_daftar" name="id_daftar" value="">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">Matematika </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="mat" name="mat"  placeholder="Nilai" value="">
    </div>
  </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_ind">Bahasa indonesia  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_ind" name="b_ind" placeholder="Nilai" value="">
    </div>
 </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_eng">Bahasa inggris  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_eng" name="b_eng" placeholder="Nilai" value="">
    </div>
 </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="ipa">Ilmu pengetahuan alam</label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="ipa" name="ipa" placeholder="Nilai" value="">
    </div>
 </div>


</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Nilai rata rata  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="n_rata_rata" placeholder="Nilai rata rata ">
    </div>
  </div>
</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Status  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="status_lulus"  >
    </div>
  </div>
</div>
</form>
</div>
  <span class="btn btn-default">Submit</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

Sabtu, 03 Juni 2017

inline edit kolom table dengan javascript / jquery

Sekarang saya lagi belajar membuat edit kolom pada table html dengan menggunakan javascript / jquery,  kali ini saya buat dua alternatif. alternatif kesatu dengan menggunakan input dan alternatif kedua tanpa input (langsung didalam kolom table).




Berikut script lengkapnya.
Maaf ya om, tante, kakak, mba, teteh, scriptnya berantakan, maklum masih pemula hehe.
mudah-mudahan manfaat.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>edit kolom table jquery </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  </head>
<body>

<style>
  .modal_edit_kolom  {width:80%;}
  .edit_kolom{cursor: pointer;}
  .border_table{border: 2px solid; padding:10px; margin:12px;}
</style>
 <script>

$(document).ready(function(){
    $(".edit_kolom").dblclick(function(){
      var get_id =  $(this).attr("id");
 var text_kolom =  $("#"+get_id).html();
 var x=$("#input_edit"+get_id).html();
 if (x === undefined) {

 $("#"+get_id).html("<input type='text'    id='input_edit"+get_id+"'  ><span onclick='ganti_text(this)' edit_id='"+get_id+"' id='submit"+get_id+"' class='btn btn-xs btn-primary submit_edit'>Submit</span>");
  $("#input_edit"+get_id).val(text_kolom);

 }
    });

});
function ganti_text(get){
      var id_kolom =  $(get).attr("edit_id");
 var text_edit =  $("#input_edit"+id_kolom).val();
 $("#"+id_kolom).html(text_edit);
 //JIKA PERLU UPDATE KE DATABASE  GUNAKAN AJAX DISINI

}


function Edit_kolom(edit_data) {
$(edit_data).css("background","#D5f5f5");
}

function simpan_edit_kolom(edit_data) {
$(edit_data).css("background","#FDFDFD");
$("#status_edit").html("data "+edit_data.innerHTML+" berhasil diupdate");

//JIKA PERLU UPDATE KE DATABASE  GUNAKAN AJAX DISINI

}
</script>
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal_edit_kolom">Klik disini untuk demo edit kolom table jquery  </button>
<!-- Modal -->
<div id="modal_edit_kolom" class="modal fade" role="dialog">
  <div class="modal-dialog modal_edit_kolom">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">inline edit column  table jquery</h4>
      </div>
      <div class="modal-body">
 <div class="row">
 <div class="col-sm-12">
 <div class="col-sm-12 border_table">
 <h4 style="color: green;">Silahkan double click kolom yang akan di edit</h4>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="edit_kolom" id="r1c1">kiki</td>
        <td class="edit_kolom" id="r1c2">lutfie</td>
        <td class="edit_kolom" id="r1c3">kiki@example.com</td>
      </tr>
      <tr>
        <td class="edit_kolom" id="r2c1">Mary</td>
        <td class="edit_kolom" id="r2c2">Moe</td>
        <td class="edit_kolom" id="r2c3">mary@example.com</td>
      </tr>
      <tr>
        <td class="edit_kolom" id="r3c1">July</td>
        <td class="edit_kolom" id="r3c2">Dooley</td>
        <td class="edit_kolom" id="r3c3">july@example.com</td>
      </tr>
    </tbody>
</table>
</div>
</div>

<div class="col-sm-12">
<div class="col-sm-12 border_table">
 <h4 style="color: green;">Silahkan  klik kolom yang akan di edit</h4>

 <h4 id="status_edit" style="color: blue;"></h4>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r1c1">kiki</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r1c2">lutfie</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r1c3">kiki@example.com</td>
      </tr>
      <tr>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r2c1">Mary</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r2c2">Moe</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r2c3">mary@example.com</td>
      </tr>
      <tr>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r3c1">July</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r3c2">Dooley</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r3c3">july@example.com</td>
      </tr>
    </tbody>
</table>
</div>
</div>
</div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

Selasa, 30 Mei 2017

Menghitung nilai rata rata dengan javascript / jquery, menggunakan modal bootstrap.

sekarang kita bahas tentang Menghitung nilai rata rata dengan javascript /  jquery, menggunakan modal bootstrap. Ga usah basa basi  berikut demo dan contoh scriptnya.





dan ini scriptnya :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Menghitung nilai rata rata dengan javascript /  jquery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>
<body>


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Klik disini untuk demo</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Menghitung nilai rata rata dengan javascript /  jquery</h4>
      </div>
      <div class="modal-body">
 <div class="row">
    <form class="form-horizontal">

<div class="col-sm-7">
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">Matematika </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="mat" name="mat"  placeholder="Nilai" value="8.00">
    </div>
  </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_ind">Bahasa indonesia  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_ind" name="b_ind" placeholder="Nilai" value="8.00">
    </div>
</div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_eng">Bahasa inggris  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_eng" name="b_eng" placeholder="Nilai" value="8.00">
    </div>
</div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="ipa">Ilmu pengetahuan alam</label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="ipa" name="ipa" placeholder="Nilai" value="8.00">
    </div>
</div>


</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Nilai rata rata  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="n_rata_rata" placeholder="Nilai rata rata ">
    </div>
  </div>
</div>
<script>
function nilai_rata_rata(){
 var rata_rata = 0;
 $(".hitung").each(function(){
           var get_textbox_value = $(this).val();

           if ($.isNumeric(get_textbox_value)) {
              rata_rata += parseFloat(get_textbox_value);
              }                
 });
 var n = rata_rata / $(".hitung").length;
 var pembulatan_nilai_rata_rata=n.toFixed(2);
 $("#n_rata_rata").val(pembulatan_nilai_rata_rata)
 }

$(document).ready(function(){
    $(".hitung").keyup(function(){
         nilai_rata_rata();
    });
});
 nilai_rata_rata();
</script>
</form>
</div>
 <button type="submit" class="btn btn-default">Submit</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

sekian contoh simplenya.
Semoga bermanfaat !