制作表格翻页以及js创建表格

最新推荐文章于 2024-05-08 14:17:05 发布
最新推荐文章于 2024-05-08 14:17:05 发布
阅读量620 收藏 1
点赞数
文章标签： j 表 翻
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title><style type="text/css">
    body{
    }
    table .table-striped{
    }
    table th{
        text-align: left;
        height: 30px;
        background: #deeeee;
        padding: 5px;
        margin: 0;
        border: 0px;
    }
    table td{
        text-align: left;
        height:30px;
        margin: 0;
        padding: 5px;
        border:0px
    }
    table tr:hover{
        background: #eeeeee;
    }
    .span6{
        /*width:500px;*/
        float:inherit;
        margin:10px;
    }
    #pagiDiv span{
        background:#1e90ff;
        border-radius: .2em;
        padding:5px;
    }
</style>
    <script type="text/javascript">
        //全局变量
        var numCount;       //数据总数量
        var columnsCounts;  //数据列数量
        var pageCount;      //每页显示的数量
        var pageNum;        //总页数
        var currPageNum ;   //当前页数
        //页面标签变量
        var blockTable;
        var preSpan;
        var firstSpan;
        var nextSpan;
        var lastSpan;
        var pageNumSpan;
        var currPageSpan;

        window.οnlοad=function(){
          var data=[
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]
            var table=document.getElementById("blocks");
            for(var i=0;i<data.length;i++){
                var row=table.insertRow(table.rows.length);
                var c1=row.insertCell(0);
                c1.innerHTML=data[i].uid;
                var c2=row.insertCell(1);
                c2.innerHTML=data[i].uname;
                var c3=row.insertCell(2);
                c3.innerHTML=data[i].sum;
            }
            //页面标签变量
            blockTable = document.getElementById("blocks");
            preSpan = document.getElementById("spanPre");
            firstSpan = document.getElementById("spanFirst");
            nextSpan = document.getElementById("spanNext");
            lastSpan = document.getElementById("spanLast");
            pageNumSpan = document.getElementById("spanTotalPage");
            currPageSpan = document.getElementById("spanPageNum");
            numCount = document.getElementById("blocks").rows.length - 1;       //取table的行数作为数据总数量（减去标题行1）
            columnsCounts = blockTable.rows[0].cells.length;
            pageCount = 5;
            pageNum = parseInt(numCount/pageCount);
            if(0 != numCount%pageCount){
                pageNum += 1;
            }
            firstPage();
        };
    </script>
</head>
<body align="center">
<div class="container" align="center" >


    <h2 align="center">Recent blocks Found By AntPool</h2>


    <table id="blocks" class="table table-striped" style="margin-top:25px">
      <tr>
          <th>uid</th>
          <th>uname</th>
          <th>sum</th>
      </tr>

    </table>
    <div id="pagiDiv" align="right" style="width:1200px">
        <span id="spanFirst">First</span>&nbsp;&nbsp;
        <span id="spanPre">Pre</span>&nbsp;&nbsp;
        <span id="spanNext">Next</span>&nbsp;&nbsp;
        <span id="spanLast">Last</span>&nbsp;&nbsp;
        The&nbsp;<span id="spanPageNum"></span>&nbsp;Page/Total&nbsp;<span id="spanTotalPage"></span>&nbsp;Page
    </div>
</div>
<script type="text/javascript">
function firstPage(){
  hide();
  currPageNum = 1;
  showCurrPage(currPageNum);
  showTotalPage();
  for(i = 1; i < pageCount + 1; i++){
      blockTable.rows[i].style.display = "";
  }
  firstText();
  preText();
  nextLink();
  lastLink();
}
function prePage(){
  hide();
  currPageNum--;
  showCurrPage(currPageNum);
  showTotalPage();
  var firstR = firstRow(currPageNum);
  var lastR = lastRow(firstR);
  for(i = firstR; i < lastR; i++){
      blockTable.rows[i].style.display = "";
  }
  if(1 == currPageNum){
      firstText();
      preText();
      nextLink();
      lastLink();
  }else if(pageNum == currPageNum){
      preLink();
      firstLink();
      nextText();
      lastText();
  }else{
      firstLink();
      preLink();
      nextLink();
      lastLink();
  }
}
function nextPage(){
  hide();
  currPageNum++;
  showCurrPage(currPageNum);
  showTotalPage();
  var firstR = firstRow(currPageNum);
  var lastR = lastRow(firstR);
  for(i = firstR; i < lastR; i ++){
      blockTable.rows[i].style.display = "";
  }
  if(1 == currPageNum){
      firstText();
      console.log
      preText();
      nextLink();
      lastLink();
  }else if(pageNum == currPageNum){
      preLink();
      firstLink();
      nextText();
      lastText();
  }else{
      firstLink();
      preLink();
      nextLink();
      lastLink();
  }
}
function lastPage(){
  hide();
  currPageNum = pageNum;
  showCurrPage(currPageNum);
  showTotalPage();
  var firstR = firstRow(currPageNum);
  for(i = firstR; i < numCount + 1; i++){
      blockTable.rows[i].style.display = "";
  }
  firstLink();
  preLink();
  nextText();
  lastText();
}
// 计算将要显示的页面的首行和尾行
function firstRow(currPageNum){
  return pageCount*(currPageNum - 1) + 1;
}
function lastRow(firstRow){
  var lastRow = firstRow + pageCount;
  if(lastRow > numCount + 1){
      lastRow = numCount + 1;
  }
  return lastRow;
}
function showCurrPage(cpn){
  currPageSpan.innerHTML = cpn;
}
function showTotalPage(){
  pageNumSpan.innerHTML = pageNum;
}
//隐藏所有行
function hide(){
  for(var i = 1; i < numCount + 1; i ++){
      blockTable.rows[i].style.display = "none";
  }
}
//控制首页等功能的显示与不显示
function firstLink(){firstSpan.innerHTML = "<a href='javascript:firstPage();'>First</a>";}
function firstText(){firstSpan.innerHTML = "First";}
function preLink(){preSpan.innerHTML = "<a href='javascript:prePage();'>Pre</a>";}
function preText(){preSpan.innerHTML = "Pre";}
function nextLink(){nextSpan.innerHTML = "<a href='javascript:nextPage();'>Next</a>";}
function nextText(){nextSpan.innerHTML = "Next";}
function lastLink(){lastSpan.innerHTML = "<a href='javascript:lastPage();'>Last</a>";}
function lastText(){lastSpan.innerHTML = "Last";}
</script>
</body>
</html>
左色
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript表格翻页效果实现思路及代码
转角遇到她的专栏
08-24 1539
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现。 表格翻页---www.jbxue.com body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } <!-- var record =
【JS案例】——原生JS绘制表格及操作单元格
m0_50785976的博客
09-21 1818
原生JS绘制表格以及操作单元格
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理
热门推荐
你的大数据学长
02-20 1万+
纯JS+HTML+CSS实现简单表格增删改查
js练习 网页翻页条模拟 表格修改
yamotl的博客
10-27 61
<td>序号</td><td>姓名</td><td>性别</td><td>操作</td>跳转</div>''<div class="st2">首页</div>'')">上一页
elementui el-table表格实现跨页(翻页)保存勾选状态(后端分页)_el-table翻页保留勾选
最新发布
2301_82243603的博客
05-08 804
selection-change用于监听鼠标点击某行前面的勾选框、选中某行的实现的勾选、表格左上角的全选，三种状态的事件；如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。
Javascript表格翻页
管子（zero）的杂乱空间
10-17 1531
表格翻页 body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } var record = 4;//每页显示多少条记录 var count = 24;//记录总数 var pageTotal = ((count+rec
原生js实现表格翻页和跳转
10-14
原生JavaScript实现表格的翻页和跳转功能可以帮助我们有效地管理页面上的内容，提高用户体验。本篇将详细介绍如何使用JavaScript实现这一功能。 首先，我们需要一个HTML表格结构，包含表头（thead）、主体（tbody）...
Vue2.0+ElementUI实现表格翻页的实例
11-28
在本文中，我们将探讨如何使用Vue2.0和ElementUI框架来实现表格的翻页功能。ElementUI是一个基于Vue.js的组件库，提供了丰富的UI组件，包括表格（Table）和分页器（Pagination）。以下是对实现这个功能的详细步骤和...
JS对HTML表格进行增删改操作
11-22
在这些函数中，我们将处理用户输入、验证数据、更新表格以及管理表格中的行。例如，`updateRow()`函数可能首先获取选中行的数据，然后在弹出的div中填充这些数据，让用户可以编辑。 ```javascript function ...
Js表格，万条数据瞬间加载 .zip
10-08
总结来说，"Js表格，万条数据瞬间加载"涉及到的技术和策略包括JavaScript的动态更新、数据分页、虚拟滚动、延迟加载、服务器端处理、数据摘要、筛选以及自定义滚动条等。这些技术的应用使得前端表格即使在处理大量...
教大家轻松制作Bootstrap漂亮表格（table）
11-27
在这个教程中，我们将学习如何利用Bootstrap创建美观的表格（table）。 首先，我们需要了解Bootstrap的引入方式。在HTML文档的`<head>`部分，通过`<link>`标签引入Bootstrap的CSS文件。例如： ```html ``` 这是将...
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
html5页面表格固定列与表格内数据跳转功能
09-27
html5表格引用了amazeui框架的css样式，固定列问题就有点问题，后来引用了tablefreeze的工具，可顺利完成固定列滑动。关于表格内数据跳转运用了location。href="##"跳转，如果要传参数可在后面加上"?a=1"，通过中间java 代码传递。
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
JS实现可编辑的表格
01-10
JS实现可编辑的表格
js实现表格分页
龙马的猫
07-05 2374
js实现表格分页，可点击按钮跳转，也可输入页数跳转
表格设置翻页 html,使用原生JS实现表格数据的翻页功能
weixin_34722015的博客
06-16 1594
使用原生JS实现如下图所示表格数据的翻页功能：HTML代码：表格标题《》简单处理一下样式，CSS代码：#pagination {text-align: center;}#table {width: 800px;margin: 50px auto;}#table th {height: 35px;}#title {text-align: center;}button {padding: 5px;bo...
纯js实现一个带分页表格
qq_40315971的博客
04-08 1527
表格由三部分组成，表格头部，表格体，表格的分页栏。本文实现的分页表格，适合后端返回所有数据后，采用前端分页。数据如果有更新，需要手动调用更新方法 表格和分页的html部分 <div id="tableContainer" style="overflow: scroll; width: 100%;"> <table id="'table" width="1000px" class="tableClass"> <thead id="thead">&lt
DOM应用 1、制作一个具有分页功能的表格组件。 2、要求不使用框架。
05-09
制作一个具有分页功能的表格组件可以分为以下几个步骤： 1. 创建 HTML 结构 在 HTML 中创建一个表格和两个按钮，一个用于上一页，一个用于下一页。同时，还需要一个显示当前页数的文本框。 ```html <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody id="tbody"></tbody> </table> <div> <button id="prev">上一页</button> <span id="current-page"></span> <button id="next">下一页</button> </div> ``` 2. 编写 JavaScript 代码 首先，需要定义一个数组存储表格数据。然后，定义一个 `pageSize` 变量表示每页显示的数据条数，以及一个 `currentPage` 变量表示当前页数。接着，编写一个 `renderTable` 函数，用于根据当前页数和每页显示的数据条数来渲染表格。最后，给上一页和下一页按钮添加点击事件，用于翻页。 ```javascript const data = [ { col1: '数据1-1', col2: '数据1-2', col3: '数据1-3' }, { col1: '数据2-1', col2: '数据2-2', col3: '数据2-3' }, { col1: '数据3-1', col2: '数据3-2', col3: '数据3-3' }, { col1: '数据4-1', col2: '数据4-2', col3: '数据4-3' }, { col1: '数据5-1', col2: '数据5-2', col3: '数据5-3' }, { col1: '数据6-1', col2: '数据6-2', col3: '数据6-3' }, { col1: '数据7-1', col2: '数据7-2', col3: '数据7-3' }, { col1: '数据8-1', col2: '数据8-2', col3: '数据8-3' }, { col1: '数据9-1', col2: '数据9-2', col3: '数据9-3' }, { col1: '数据10-1', col2: '数据10-2', col3: '数据10-3' }, { col1: '数据11-1', col2: '数据11-2', col3: '数据11-3' }, { col1: '数据12-1', col2: '数据12-2', col3: '数据12-3' }, { col1: '数据13-1', col2: '数据13-2', col3: '数据13-3' }, { col1: '数据14-1', col2: '数据14-2', col3: '数据14-3' }, { col1: '数据15-1', col2: '数据15-2', col3: '数据15-3' } ]; const pageSize = 5; let currentPage = 1; function renderTable() { const tbody = document.getElementById('tbody'); tbody.innerHTML = ''; const start = (currentPage - 1) * pageSize; const end = start + pageSize; const currentData = data.slice(start, end); currentData.forEach(item => { const tr = document.createElement('tr'); tr.innerHTML = ` <td>${item.col1}</td> <td>${item.col2}</td> <td>${item.col3}</td> `; tbody.appendChild(tr); }); const currentPageElem = document.getElementById('current-page'); currentPageElem.innerText = `第 ${currentPage} 页`; } renderTable(); document.getElementById('prev').addEventListener('click', () => { if (currentPage > 1) { currentPage--; renderTable(); } }); document.getElementById('next').addEventListener('click', () => { const totalPages = Math.ceil(data.length / pageSize); if (currentPage < totalPages) { currentPage++; renderTable(); } }); ``` 3. CSS 样式 为了美化表格样式，可以自由地添加 CSS 样式。 ```css table { border-collapse: collapse; width: 100%; margin-bottom: 20px; } table th, table td { border: 1px solid #ddd; padding: 8px; text-align: left; } table th { background-color: #f2f2f2; } button { background-color: #007bff; color: #fff; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; margin-right: 10px; } button:hover { background-color: #0069d9; } ``` 这样，就完成了一个具有分页功能的表格组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值