jquery 는 ajax 요청 을 통 해 배경 데 이 터 를 표 에 표시 하 는 방법 을 가 져 옵 니 다.

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" >
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>

<table class="table table-bordered" id='tabletest'>
 <tr>
  <th>  </th>
  <th>    </th>
  <th>    </th>
  <th>  </th>
 </tr>
 </table>

$(function(){
 $.ajax({
  url:'data.json',
  type:'get',
  dataType:'json',
  success:function(data){
   //        data        
   for(i in data.data) //data.data     ，    8   ，i      
   {
    var tr;
    tr='<td>'+data.data[i].name+'</td>'+'<td>'+data.data[i].startTime+'</td>'+'<td>'+data.data[i].is_true+'</td>'+'<td>'+data.data[i].device+'</td>'
    $("#tabletest").append('<tr>'+tr+'</tr>')
   }
  }
 })
})

 ***  **** for in       
           (each,foreach)：

  $.each(arr,function(index,item){})

  arr.forEach(function(item,index))

 // arr    ,index  ，item    

$(function(){
    $.ajax({
   url:'data.json',
   type:'get',
   dataType:'json',
   success:function(data){
    $.each(data.data,function(index,item){
     var tr;
     tr='<td>'+item.name+'</td>'+'<td>'+item.startTime+'</td>'+'<td>'+item.is_true+'</td>'+'<td>'+item.device+'</td>';
     $("#tabletest").append('<tr>'+tr+'</tr>')
    })
   }
})})

다음 에 li 추가
before:
전에 li 추가
after:
다음 에 li 추가
연장
(1)데이터 중 istrue 의 0 을 중국어 로 변환 합 니 다.
세 가지 연산 이나 조건 으로 판단 하 다.

item.is_true=parseInt(item.is_true)==0?' ':' '
//     string     ，                item.is_true==0? item.is_true=' ': item.is_true=' '

(2)데이터 에 있 는 device 필 터 를 콜론 이전 데이터 만 표시 합 니 다.

item.is_true=parseInt(item.is_true)==0?' ':' '
var arr=item.device.split(":")
item.device=arr[0]

split()구분자 방법 은 문자열 배열 로 나 누 는 데 사 용 됩 니 다.
4.data.json 파일

{
 "status": 0,
 "data": [ 
  { 
   
   "name": "     ", 
   "startTime": "2017-03-02 00:00",
   "is_true":"0",
   "device": "SM-C9000:samsung"
  }, 
  { 
    
   "name": "     ", 
   "startTime": "2017-03-02 00:00" ,
    "is_true":"0",
    "device": "SM705:smartisan"
  }, 
  { 
    
   "name": "     ", 
   "startTime": "2017-03-02 00:00" ,
    "is_true":"0" ,
     "device": "EVA-AL00:HUAWEI"
   }
 ]
}

효과 그림:

이상 의 jquery 는 ajax 요청 을 통 해 배경 데 이 터 를 가 져 와 표 에 표시 하 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 많은 응원 을 바 랍 니 다.