首页 > 代码库 > 收集的冻结table 标题和左侧（完美）
收集的冻结table 标题和左侧（完美）
|
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="http://www.mamicode.com/~/Scripts/jquery-1.10.2.min.js"></script>
<style>
.tablecss td {
word-break: break-all;
word-wrap: break-word;
border: 1px solid #d0b5b5;
padding: 5px;
}
.tablecss {
border-collapse: collapse;
}
.table_title td {
text-align: center;
font-size: large;
color: black;
}
</style>
</head>
<body>
<table class="tablecss" id="t1">
<tbody>
<tr class="table_title primaryTr001"><td class="cktd"><div style="width:130px"><input type="checkbox" value="" class="table_checkbox_all"></div></td><td><div style="width:130px">真实姓名</div></td><td><div style="width:130px">登录名<span class="glyphicon glyphicon-circle-arrow-down"></span></div></td><td><div style="width:130px">性别</div></td><td><div style="width:130px">出生日期</div></td><td><div style="width:130px">联系方式</div></td><td><div style="width:130px">邮箱</div></td><td><div style="width:130px">是否管理员</div></td><td><div style="width:300px">其他说明</div></td><td><div style="width:220px">操作</div></td></tr>
<tr sid="44"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批5</td><td>jssp5</td><td></td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="43"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批4</td><td>jssp4</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="42"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批3</td><td>jssp3</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="41"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批2</td><td>jssp2</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="40"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批1</td><td>jssp1</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="39"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批5</td><td>ywdsp5</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="38"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批4</td><td>ywdsp4</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="37"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批3</td><td>ywdsp3</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="36"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批2</td><td>ywdsp2</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="35"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批1</td><td>ywdsp1</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="34"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪4</td><td>xiaozhu4</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="33"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪3</td><td>xiaozhu3</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="32"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪2</td><td>xiaozhu2</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="31"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪1</td><td>xiaozhu1</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="30"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售20</td><td>xiaoshou20</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="29"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售19</td><td>xiaoshou19</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="28"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售18</td><td>xiaoshou18</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="27"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售17</td><td>xiaoshou17</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="26"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售16</td><td>xiaoshou16</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr sid="25"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售15</td><td>xiaoshou15</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="http://www.mamicode.com/删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="http://www.mamicode.com/编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="http://www.mamicode.com/分配/查看角色"></td></tr>
<tr class="endtr22"><td colspan="10" class="endtd"><span class="bar_noprepage">上一页</span><span class="bar_currentpage">1</span><span class="bar_pages bar_skippage" topage="2">2</span><span class="bar_pages bar_skippage" topage="3">3</span><span class="bar_nextpage bar_skippage" topage="2">下一页</span><span>共<span class="bar_record">43</span>条数据 分<span class="bar_pagecount">3</span>页 </span> 每页显示<input type="text" value="http://www.mamicode.com/20" class="bar_pageSize">条 当前为第<input type="text" value="http://www.mamicode.com/1" class="bar_cur">页 <input type="button" value="http://www.mamicode.com/跳至" class="bar_goto_btn"> </td></tr>
</tbody>
</table>
</body>
</html>
<script>
//调用
freezeTable("t1", 1, 1, 800, 400);
/*
* 锁定表头和列
*
* 参数定义
* table - 要锁定的表格元素或者表格ID
* freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0
* freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0
* width - 表格的滚动区域宽度
* height - 表格的滚动区域高度
*/
function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {
if (typeof (freezeRowNum) == ‘string‘)
freezeRowNum = parseInt(freezeRowNum)
if (typeof (freezeColumnNum) == ‘string‘)
freezeColumnNum = parseInt(freezeColumnNum)
var tableId;
if (typeof (table) == ‘string‘) {
tableId = table;
table = $(‘#‘ + tableId);
} else
tableId = table.attr(‘id‘);
var divTableLayout = $("#" + tableId + "_tableLayout");
if (divTableLayout.length != 0) {
divTableLayout.before(table);
divTableLayout.empty();
} else {
table.after("<div id=‘" + tableId + "_tableLayout‘ style=‘overflow:hidden;height:" + height + "px; width:" + width + "px;‘></div>");
divTableLayout = $("#" + tableId + "_tableLayout");
}
var html = ‘‘;
if (freezeRowNum > 0 && freezeColumnNum > 0)
html += ‘<div id="‘ + tableId + ‘_tableFix" style="padding: 0px;"></div>‘;
if (freezeRowNum > 0)
html += ‘<div id="‘ + tableId + ‘_tableHead" style="padding: 0px;"></div>‘;
if (freezeColumnNum > 0)
html += ‘<div id="‘ + tableId + ‘_tableColumn" style="padding: 0px;"></div>‘;
html += ‘<div id="‘ + tableId + ‘_tableData" style="padding: 0px;"></div>‘;
$(html).appendTo("#" + tableId + "_tableLayout");
var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;
var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;
var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;
var divTableData = http://www.mamicode.com/$("#" + tableId + "_tableData");
divTableData.append(table);
if (divTableFix != null) {
var tableFixClone = table.clone(true);
tableFixClone.attr("id", tableId + "_tableFixClone");
divTableFix.append(tableFixClone);
}
if (divTableHead != null) {
var tableHeadClone = table.clone(true);
tableHeadClone.attr("id", tableId + "_tableHeadClone");
divTableHead.append(tableHeadClone);
}
if (divTableColumn != null) {
var tableColumnClone = table.clone(true);
tableColumnClone.attr("id", tableId + "_tableColumnClone");
divTableColumn.append(tableColumnClone);
}
$("#" + tableId + "_tableLayout table").css("margin", "0");
if (freezeRowNum > 0) {
var HeadHeight = 0;
var ignoreRowNum = 0;
$("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {
if (ignoreRowNum > 0)
ignoreRowNum--;
else {
var td = $(this).find(‘td:first, th:first‘);
HeadHeight += td.outerHeight(true);
ignoreRowNum = td.attr(‘rowSpan‘);
if (typeof (ignoreRowNum) == ‘undefined‘)
ignoreRowNum = 0;
else
ignoreRowNum = parseInt(ignoreRowNum) - 1;
}
});
HeadHeight += 2;
divTableHead.css("height", HeadHeight);
divTableFix != null && divTableFix.css("height", HeadHeight);
}
if (freezeColumnNum > 0) {
var ColumnsWidth = 0;
var ColumnsNumber = 0;
$("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {
if (ColumnsNumber >= freezeColumnNum)
return;
ColumnsWidth += $(this).outerWidth(true);
ColumnsNumber += $(this).attr(‘colSpan‘) ? parseInt($(this).attr(‘colSpan‘)) : 1;
});
ColumnsWidth += 2;
divTableColumn.css("width", ColumnsWidth);
divTableFix != null && divTableFix.css("width", ColumnsWidth);
}
divTableData.scroll(function () {
divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());
divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());
});
divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });
divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" });
divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });
divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });
divTableFix != null && divTableFix.offset(divTableLayout.offset());
divTableHead != null && divTableHead.offset(divTableLayout.offset());
divTableColumn != null && divTableColumn.offset(divTableLayout.offset());
divTableData.offset(divTableLayout.offset());
}
/*
* 调整锁定表的宽度和高度，这个函数在resize事件中调用
*
* 参数定义
* table - 要锁定的表格元素或者表格ID
* width - 表格的滚动区域宽度
* height - 表格的滚动区域高度
*/
function adjustTableSize(table, width, height) {
var tableId;
if (typeof (table) == ‘string‘)
tableId = table;
else
tableId = table.attr(‘id‘);
$("#" + tableId + "_tableLayout").width(width).height(height);
$("#" + tableId + "_tableHead").width(width - 17);
$("#" + tableId + "_tableColumn").height(height - 17);
$("#" + tableId + "_tableData").width(width).height(height);
}
function pageHeight() {
if ($.browser.msie) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
} else {
return self.innerHeight;
}
};
//返回当前页面宽度
function pageWidth() {
if ($.browser.msie) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
} else {
return self.innerWidth;
}
};
</script>
|
收集的冻结table 标题和左侧（完美）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。