点击表格中的某个列,弹出一个div层

通常有一种业务场景，数据库中某个字段的长度非常长，为了美观，不可以将该字段的所有内容展现在页面上。这个时候，一般会通过弹出层来解决这个问题。在这里必要提一下，这个长字段的内容是在展现列表数据的时候，使用hidden域存储起来呢？还是使用ajax请求，当点击列的时候，去数据库中取出来。如果是企业级后台应用，两种都可以。如果是访问量很大的页面，就不要使用每次从数据库中取的方式了。

html 代码

<pre name="code" class="html"><span style="font-size:18px;"><p class="showbtn"></p>
<div id="bg"></div>
<div class="box" style="display:none">
<span style="white-space:pre">	</span><h2>操作内容明细<a class="close">关闭</a></h2>
<span style="white-space:pre">	</span><div class="list" style="padding-left:0px;">
<span style="white-space:pre">		</span><div>
<span style="white-space:pre">		</span>  <table id="detailContentTable" class="tab" cellspacing="0" cellpadding="0">
<span style="white-space:pre">		</span>  </table>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">	</span></div>
</div></span>

Jquery代码-弹出div层

$("#bg").css({
   display: "block", height: $(document).height()
});

点击某个列的时候，触发上面的代码。

Jquery代码-关闭弹出层

$(".close").click(function () {
   $("#bg,.box").css("display", "none");
});

弹出层搞定后，必须把后台数据展现到这个弹出层中，本文中，后台的数据格式是json的，如下：

var table = $("#detailContentTable");

var jsonObj;
try{
  jsonObj = <strong><span style="color:#ff0000;">$.parseJSON(content);</span></strong>
}
catch(ex){
  jsonObj = 'noValidJson';	
}

if (jsonObj == 'noValidJson') {
    table.append("<tr><td style='white-space: normal'>"+content+"</td></tr>");
}
else {
   $.each(jsonObj, function(k, v) {
	   table.append("<tr><td>"+k+"</td><td>"+v+"</td></tr>");
   });
}

content是存储在hidden中的json字符串。