Question

如何只在通过JSON数组循环（搜索）时附加表头？当我尝试这个时，每次开始搜索表头时为每个匹配添加，尽管两个产品属于同一组。

HTML

</select>
Search: <input type="text" name="search" id="search" />
<div id="place"></div>

Java脚本

 $.ajaxSetup({ cache: false });

 $('#search').keyup(function(event){
 $('#place').html('');
 if (event.keyCode == 8) {
          $('#place').hide('')
          }else{
          $('#place').show('') 
          }
 $('#state').val('');
 var searchField = $('#search').val();
 var expression = new RegExp(searchField, "i");

LOOP JSON

  $.getJSON('product.json', function(result) {
   //LOOP JSON

TABLE HEAD仅在搜索中出现一次。

  $.each(result, function(key, value){
       //TABLE HEAD this need to apperas only one
       var text = '';
       text +='<table class="table" width="610" cellpadding="3" 
        cellspacing="1" bgcolor="#cccccc">';

       text +='<tr>';
       text +='<th width="20%" bgcolor="#aaaaaa" align="left"><font 
       color="#ffffff">Model</font></th>';
       text +='<th width="25%" bgcolor="#aaaaaa"><font color="#ffffff">CODEC 
       Supported</font></th>';

       text +='</tr>';

       text +='<p style="font-size:15px; font-weight:bold; color:#2773ba; 
       margin-bottom:5px">'+value.brand+'</p>'; 
       // END TABLE HEAD

       //END OF TABLE HEAD -START TABLE BODY

       // TABLE BODY is filling with data from json

      if (value.brand.search(expression) != -1 || 
      value.model.search(expression) != -1 || 
      value.CODECSupported.search(expression) != -1  )
       {

       text += '<tr>'
       text += '<td colspan="9" align="left" bgcolor="#FFFFFF" style="font-
       weight:bold; color:#3399cc">'+value.type+'</td>'
       text += '</tr>'
       text += '<tr>'
       text += '<td bgcolor="#FFFFFF">'+value.model+'</td>'
       text += '<td align="center" 
       bgcolor="#FFFFFF">'+value.CODECSupported+'</td>'
       text += '</tr>'
       text += '</table>'

       $('#place').append(text)


      }


      });   
      });
      });

身体结束

})

Answer 1

你可以在循环之外创建表创建（只在循环中生成数据），或者你可以有一个布尔值来检查你是否已经完成循环

伪代码示例：

passed = false;
for(i=0;i<10;i++){
    // some code happening
    if(!passed){
        // here add the headers
        passed = true;
    }
    else{
        //do the rest
    }
    // other code happening
}

我建议将表设置在循环之外，因为它会更有效，因为使用这个伪代码，你将对循环的每次迭代进行额外的检查。

希望这有帮助！

如何在循环JSON时只附加一次表头

1 个答案: