js练习网页翻页条模拟表格修改

yamotl

于 2023-10-27 23:06:30 发布

阅读量63

点赞数

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/yamotl/article/details/134085475

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

翻页条
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .sty1{width:1000px;height:32px;margin-left:100px;}
    .st2{width: 56px;height: 32px;background-color: #2ac;margin-left: 6px;color:#fff;text-align: center;
        line-height: 32px; font-size: 13px;float:left;border-radius: 4px;}
    .st3{background-color: #a00;}
    .st4{background-color: #fff;}
    </style>

</head>
<body>
    <div id="pageview" class="sty1"></div>
</body>
<script>
 
    function pageView(index){
        var x=document.getElementById("pageview");
        var str='<div class="st2">首页</div>';
            str+='<div class="st2" οnclick="pageView('+(index-1)+')">上一页</div>';
            str+='<div class="st2">'+(index-2)+'</div>';
            str+='<div class="st2">'+(index-1)+'</div>';
            str+='<div class="st2 st3">'+index+'</div>';
            str+='<div class="st2">'+(index+1)+'</div>';
            str+='<div class="st2">'+(index+2)+'</div>';
            str+='<div class="st2" οnclick="pageView('+(index+1)+')">下一页</div>';
            str+='<div class="st2">末页</div>';
            str+='<div class="st2">总计条</div>';
            str+='<div class="st2">总计页</div>';
            str+='<div class="st2 st4"><input type="text" id="pageinp" style="width:80%;height:24px;" /></div>';
            str+='<div class="st2" οnclick="gopage()">跳转</div>';
            x.innerHTML=str;
    }
    function gopage()
    {
        var index=document.getElementById("pageinp").value;
        index=parseInt(index)//强制转换int类型
        pageView(index);
    }
    pageView(22);
</script>
</html>

表格修改
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .sty1{width:1000px;height:600px;margin:auto;background-color: #ccc;}
    .st2{width: 56px;height: 32px;background-color: #2ac;margin-left: 6px;color:#fff;text-align: center;
        line-height: 32px; font-size: 13px;float:left;border-radius: 4px;}
    .st3{background-color: #a00;}
    .st4{background-color: #fff;}
    </style>

</head>
<body>
    <div id="pageview" class="sty1"></div>
</body>
<script>
 
    function pageView(){
        var x=document.getElementById("pageview");
        var st='<table style="width:100%;" border=1>';
            st+='<tr><td>序号</td><td>姓名</td><td>性别</td><td>操作</td></tr>';
            for(var i=1;i<10;i++)
            {
                st+='<tr>';
                st+='<td id="ta'+i+'">'+(i+1)+'</td>';
                st+='<td id="tb'+i+'">王大帅'+(i+1)+'</td>';
                st+='<td id="tc'+i+'">'+(i%2==1? '女':'男')+'</td>';
                st+='<td id="td'+i+'"><input type="button" value="修改" οnclick="change1('+i+')"></td>';
                st+='</tr>';
            }
            st+='</table>';
            x.innerHTML=st;

    }
    function change1(id){
        var x1=document.getElementById("ta"+id);
        var x2=document.getElementById("tb"+id);
        var x3=document.getElementById("tc"+id);
        var x4=document.getElementById("td"+id);
        x1.innerHTML='<input id="ma'+id+'" type="text" value="'+x1.innerHTML+'">';
        x2.innerHTML='<input id="mb'+id+'" type="text" value="'+x2.innerHTML+'">';
        x3.innerHTML='<input id="mc'+id+'" type="text" value="'+x3.innerHTML+'">';
        x4.innerHTML='<input type="button" value="确认修改" οnclick="confirm('+id+')" />';
        

    }
    function confirm(id){
        var x1=document.getElementById("ta"+id);
        var x2=document.getElementById("tb"+id);
        var x3=document.getElementById("tc"+id);
        var x4=document.getElementById("td"+id);
        x1.innerHTML=document.getElementById("ma"+id).value;
        x2.innerHTML=document.getElementById("mb"+id).value;
        x3.innerHTML=document.getElementById("mc"+id).value;
        x4.innerHTML='<input type="button" value="修改" οnclick="change1('+i+')" />';

    }
    pageView();
</script>