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">×</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>
