<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="CloneTableColumn.js" type="text/javascript"></script>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
.itemList
{
border: solid 1px #cccccc;
overflow: auto;
border-collapse: collapse;
}
.itemList td
{
padding: 0px 0px 0px 0px;
color: #444444;
border: solid 1px #cccccc;
text-align: center;
line-height: 20px;
}
.selected
{
background-color: #fdee88;
}
.hovertr
{
background-color: #fff8c7;
}
.errortd
{
border: dashed 1px red;
}
</style>
<script type="text/javascript">
jQuery(function() {
CloneTableColumn("tab1");
// FixTable(tab1, 1, 60, 100);
// jQuery.fn.CloneTableHeader("tab1")
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style=" position:absolute; top:47px; left:72px;width:900px; overflow-x:auto;overflow-y:auto;" id="tableDiv" >
<table cellpadding="0" width="1870" id="tab1" cellspacing="0" border="0" class="itemList">
<thead>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td width="70"> 编号 </td>
<td width="300"> 姓名 </td>
<td width="300"> 年龄</td>
<td width="300"> 城市</td>
<td width="300"> 身高</td>
<td width="300"> 体重</td>
<td width="300"> 电话</td>
</tr>
</thead>
<tbody>
<tr>
<td width="70">1</td>
<td width="200">张三1</td>
<td width="200">22</td>
<td width="200">北京</td>
<td width="200">170</td>
<td width="200">99</td>
<td width="200">110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
<tr>
<td width="70">1</td>
<td>张三1</td>
<td>22</td>
<td>北京</td>
<td>170</td>
<td>99</td><td>110</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
// JavaScript Document
CloneTableColumn = function(tableId,divId){
var tableOrg = jQuery("#" + tableId);
var table = tableOrg.clone();
table.attr("id", "cloneTable");
//隐藏头
var header = jQuery(tableOrg).find("thead");
jQuery(header).find("tr:first td:first").hide();
//计算宽度
var tbody = jQuery(table).find("tbody");
var columns = jQuery(tbody).find("tr:first td:first");
var columnsWidth = columns.outerWidth(true);
var tableCloneCols = jQuery(tableOrg).find("tbody tr");
//隐藏第一列
for(var i = 0;i<tableCloneCols.size();i++){
tableCloneCols.eq(i).find("td:first").hide();
}
var columnsDiv = document.createElement("div");
columnsDiv.appendChild(table[0]);
jQuery(columnsDiv).css("left", "0");
jQuery(columnsDiv).css("position", "absolute");
jQuery(columnsDiv).css("top", "47px");
jQuery(columnsDiv).css("width", columnsWidth);
jQuery(columnsDiv).css("overflow", "hidden");
jQuery(columnsDiv).css("z-index", "20");
jQuery(columnsDiv).attr("id", tableId + "tableColumnDiv");
jQuery(columnsDiv).insertBefore(tableOrg.parent());
//jQuery(columnsDiv).wrap(tableOrg.parent());
//alert(tableCloneCols.size())
}
2118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
