Kk



<!DOCTYPE html>
<html>
<head><title>DATA KARTU KELUARGA</title>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script type="text/javascript">
    function submit() {
        var url     = "json-cekKK.php?nik="+document.getElementsByName("target")[0].value;
        head = '<h2>Data Kartu Keluarga ['+document.getElementsByName("target")[0].value+']</h2><table id="customers"><tr><th>NO.</th><th>NIK</th><th>NAMA LENGKAP</th><th>TTL</th><th>JENIS KELAMIN</th><th>STATUS KAWIN</th><th>HUB KELUARGA</th><th>NAMA AYAH</th><th>NAMA IBU</th></tr>';
        body = "</table>";
        var str = "";
        var cnt = 0;
        $.getJSON(url, function (data) {
            $.each(data.result, function(i, item) {
            cnt++;
            str += '<tr><td>'+cnt+'</td>';
            str += "<td>"+data.result[i].NIK+"</td>";
            str += "<td>"+data.result[i].NAMA_LGKP+"</td>";
            str += "<td>"+data.result[i].TMPT_LHR+" , "+data.result[i].TGL_LHR+"</td>";
            str += "<td>"+data.result[i].JENIS_KLMIN+"</td>";
            str += "<td>"+data.result[i].STAT_KWN+"</td>";
            str += "<td>"+data.result[i].STAT_HBKEL+"</td>";
            str += "<td>"+data.result[i].NAMA_LGKP_AYAH+"</td>";
            str += "<td>"+data.result[i].NAMA_LGKP_IBU+"</td></tr>";


            document.getElementById("result").innerHTML = head+str+body;

            });

        });
    }
</script>

<style>
body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  }
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  font-weight:normal;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background:#454d58;
  color: white;
}
</style>
</head>
<body>
<br><br>
<div class="container">
      <div class="row">
      <div class="col-md-3  toppad  pull-right col-md-offset-0 col-sm-offset-0 ">
<!-- Search form -->
<div class="md-form mt-0">
    <div class="input-group">
   <input class="form-control" type="text" placeholder="Input Disini" aria-label="Input Disini" name="target">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="submit()">Cari KK...</button>
   </span>
</div>

</div>
      </div></div></div>
<div id="result"></div>

</body>
</html>