console 命令行工具 X clear

console

$(document).ready(function(){

	$("#sideMenu").click(function(){
    $('.ui.labeled.icon.sidebar')
  	.sidebar({
  	dimPage: false,
  	closable: false
	}).sidebar('toggle');
	;
    });
	
  $("#displayTable").click(function(){
    //先列出需要显示的json的熟悉数组
    var AttrArray = ['first','name','age','second'];
    //eval
    var simpleJ = eval("("+simpleJson+")");
    var htmlStr = "<thead><tr>";
    for(var headValue in AttrArray)
    {
    	htmlStr += "<td>" + AttrArray[headValue] + "</td>"
    }
    htmlStr += "</tr></thead><tbody>";    
	//遍历json，取出每条数据
    for(var sj in simpleJ)
    {
    	htmlStr += "<tr>" 
        //拿到一条数据后，遍历需要显示的属性
      for(var attr in AttrArray)
      {
          //再到拿到的这条数据中遍历属性，依次找到需要显示的属性值
          for(var s in simpleJ[sj])
          {
              if(AttrArray[attr] == s)
                  htmlStr += "<td>" + simpleJ[sj][s] + "</td>";
          }
      }
      htmlStr += "</tr>" 
    }
    htmlStr += "</tbody>";
   // alert(htmlStr);
    $("#showTable").html(htmlStr);
  });
});

var simpleJson = "[{'name':'fu','age':'1','first':'111','second':'2222'},{'name':'ff','age':'1','first':'111','second':'2222'},{'name':'ss','age':'1','first':'111','second':'2222'},{'name':'yy','age':'1','first':'111','second':'2222'},{'name':'zzz','age':'1','first':'111','second':'2222'}]"


var jsonStr = "{'employees': [{ 'firstName':'Bill', 'lastName':'Gates' },{'firstName':'George' , 'lastName':'Bush' },{ 'firstName':'Thomas' ,'lastName':'Carter' }]}";

<body>

<button class="ui primary button" id="sideMenu">
  Save
</button>
<button class="ui button" id="displayTable">
  Discard
</button>
<div class="ui violet message">紫罗兰色</div>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
<table id = "showTable" class="ui selectable inverted table"></table>

<div class="ui left demo vertical inverted sidebar labeled icon menu">
  <a class="item">
    <i class="home icon"></i>
    Home
  </a>
  <a class="item">
    <i class="block layout icon"></i>
    Topics
  </a>
  <a class="item">
    <i class="smile icon"></i>
    Friends
  </a>
</div>

</body>

SOURCE

本项目引用的自定义外部资源