分享一个首行表头和最左列和最右列固定中间滚动的htmltable样式资源-CSDN下载

共4个文件

js：2个

css：1个

html：1个

html

table

首行固定

首列固定

表头固定

1星需积分: 46 119 浏览量 2019-12-22 18:27:21 上传评论 1 收藏 41KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

table.zip （4个子文件）

index2.html 6KB

jquery.min.js 94KB

table.js 17KB

table.css 5KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>左右两侧固定列，中间内容可以横向拖动</title> <link rel="stylesheet" href="./table.css"> <script src="./jquery.min.js"></script> <script src="./table.js"></script> <style> </style> </head> <body> <div class="fixed-table-box row-col-fixed">  <div class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="w-150" data-fixed="true"> <div class="table-cell">字段1</div> </th> <th class="w-120"> <div class="table-cell">字段2</div> </th> <th class="w-120"> <div class="table-cell">字段3</div> </th> <th class="w-120"> <div class="table-cell">字段4</div> </th> <th class="w-300"> <div class="table-cell">字段5</div> </th> <th class="w-120"> <div class="table-cell">字段6</div> </th> <th class="w-100" data-fixed="true" data-direction="right"> <div class="table-cell">字段7</div> </th> </tr> </thead> </table> </div>   <div class="fixed-table_body-wraper"> <table class="fixed-table_body" cellspacing="0" cellpadding="0"> <tbody>  </tbody> </table> </div>   <div id="date" class="fixed-table_fixed fixed-table_fixed-left"> <div class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="w-150"> <div class="table-cell">字段1</div> </th> </tr> </thead> </table> </div> <div class="fixed-table_body-wraper"> <table class="fixed-table_body" cellspacing="0" cellpadding="0"> <tbody>  </tbody> </table> </div> </div> <div id="operate" class="fixed-table_fixed fixed-table_fixed-right" style="right: 1px;"> <div id="operate1" class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="w-100"> <div class="table-cell">字段7</div> </th> </tr> </thead> </table> </div> <div class="fixed-table_body-wraper" style="margin-top: 41px;"> <table class="fixed-table_body" cellspacing="0" cellpadding="0"> <tbody>  </tbody> </table> </div> </div>  </div> <div class="fixed-table-box_fixed-right-patch" style="width: 0px; height: 39px;"></div> <div class="btns"> <button type="button" id="empty_data">清空数据</button> <button type="button" id="add_data">添加数据</button> <button type="button" id="del_row">删除行</button> </div> <script> var random = 10000; // var random = Math.random(); //初始化FixedTable $(".fixed-table-box").fixedTable(); //清空表格 $("#empty_data").on("click", function () { $(".fixed-table-box").emptyTable(); }); //添加数据 $("#add_data").on("click", function () { $(".fixed-table-box").addRow(function () { return getRowHtml(); }); }); //删除指定行 $("#del_row").on("click", function () { $(".fixed-table-box").deleteRow($(".fixed-table-box").children('.fixed-table_fixed-left').children('.fixed-table_body-wraper').find('tr').eq(0)); }); //页面初始化给定一个20行的表格S $(".fixed-table-box").addRow(function () { var html = ''; for (let i = 0; i < 20; i++) { html += getRowHtml(); } return html; }); function getRowHtml() { random++; // var random = Math.random(); // var random = Math.round(Math.random()); var html = ''; // for(var i = 0; i < 5; i ++){ html += '<tr>'; html += ' <td class="w-150"><div class="table-cell">' + random + '</div></td>'; html += ' <td class="w-120"><div class="table-cell">' + random + '</div></td>'; html += ' <td class="w-120"><div class="table-cell">' + random + '</div></td>'; html += ' <td class="w-120"><div class="table-cell">' + random + '</div></td>'; html += ' <td class="w-300"><div class="table-cell">' + random + '</div></td>'; html += ' <td class="w-120"><div class="table-cell">' + random + '</div></td>'; html += ' <td class="w-100">'; html += ' <div class="table-cell">'; html += ' <a href="###">查看</a>'; html += ' <a href="###">编辑</a>'; html += ' </div>'; html += ' </td>'; html += '</tr>'; // } return html; } </script> </body> </html>

评论收藏

内容反馈