表格页面前端实现

最新推荐文章于 2024-05-11 14:22:31 发布

lzsan_

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量602

点赞数

文章标签： html5 javascript css3

本文链接：https://blog.csdn.net/lzsan_/article/details/123905939

版权

表格页面：

奇数行和偶数行颜色不同，鼠标移上去变色，点击选择也变色，点上面的增加按钮就增加一行，输入内容后，点击最右边的保存，点击删除可以删掉此行，点修改可以修改此行。，点击最上面的复选框，下面的全选。

index.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面设计</title>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/index.js"></script>
</head>
<body onload=setBgC();>
    <div id="a">  
         <div id="h">
         <input type="text" style="width: 110px;" placeholder="输入用户名"/>
         <input type="text" style="width: 110px;" placeholder="输入姓名"/>
         <input type="text" style="width: 110px;" placeholder="输入邮箱地址">
         <input type="text" style="width: 110px;" placeholder="输入省份"/>
         <button id="cz"><img src="img/cz.png"/>查找</button> 
         <button id="qk"><img src="img/qk.png"/>清空</button> 
         <button id="zj" onclick="insert_row();"><img src="img/zj.png"/>增加</button> 
         <button id="sc"><img src="img/sc.png"/>删除</button> 
         <button id="xg"><img src="img/xg.png"/>修改</button> 
        </div>
    <div>
        <table id="tb" cellspacing="0">
            <thead>
                <tr>
                    <td><input type="checkbox" id="allcheck" onclick="checkAll()"></td>
                    <td>用户名</td>
                    <td>中文名</td>
                    <td>邮箱</td>
                    <td>省份</td>
                    <td>城市</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody> 
                <tr id="r">
                    <td><input name="choose" type="checkbox"/></td>
                    <td>admin</td>
                    <td>管理员</td>
                    <td>ng@abc.com</td>
                    <td>上海</td>
                    <td>宝山</td>
                    <td><input type="button" value="删除"  onclick="delete_row('r');"/>
                        <input type="button" value="修改"  onclick="update_row('r');"/>     
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        每页
        <select>
            <option>5</option>
            <option>10</option>
        </select>
        ，共20条数据，1页/2页
        <span>尾页&nbsp;</span>
        <span>下一页&nbsp;</span>
        <span>上一页&nbsp;</span>
        <span>首页&nbsp;</span>
    </div>
</div>
  
</body>
</html>

index.css:

#a{
    background-color:rgb(186, 201, 228);
    width:850px;
    height:700px;
    margin:0 auto;
}
#h{
    margin: 20px auto;
    width:830px;
}
span{
    float:right;
}
#cz{
    background-color: blue;
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#qk{
    background-color: red;
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#zj{
    background-color: green;
    color:white;
    border:none;
    height: 25px;

    line-height: 25px;

}
#sc{
    background-color: rgb(206, 206, 127);
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#xg{
    background-color: rgb(82, 150, 214);
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#tb {
    margin:20px auto;
    width: 830px;
    border: 1px solid black;
}

#tb thead {
    font-weight: bold;
    background-color: cornflowerblue;
}

#tb tr {
    text-align: center;
    line-height: 30px;
}

#tb td {
    border: 1px solid rgb(13, 13, 14);
}

.bg1 {
    background-color: aliceblue;
}

.bg2 {
    background-color: rgb(149, 149, 160);
}

.bg3 {
    background-color: rgb(204, 221, 165);
}

.bg4 {
    background-color: rgb(146, 133, 151);
}
table tbody button{
    border:none;
    color:blueviolet;
}

index.js:

function setBgC() {
    setoddEvenBgC();
    var trs = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    for (var index = 0; index < trs.length; index++) {

        //对每个tr绑定事件,动态绑定事件
        trs[index].onmouseover = function() {
            this.className = "bg3";
        }
        trs[index].onmouseout = function() {
            setoddEvenBgC();
        }
        var cb = trs[index].getElementsByTagName("input")[0];
        cb.onclick = function() {
            if (this.checked) { //被选中，设置当前行class为bg4
                var tr = this.parentNode.parentNode;
                tr.className = "bg4";
            }
        }
    }
    setoddEvenBgC();
}

function setoddEvenBgC() {
    var trs = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    for (var index = 0; index < trs.length; index++) {
      if ((index + 1) % 2 == 0) {
           trs[index].className = "bg2"; //偶数行
      } else {
              trs[index].className = "bg1"; //奇数行
         
       }
    }
}

function checkAll() {
    var checkAllEle = document.getElementById("allcheck");
    var checkones = document.getElementsByName("choose");
    if (checkAllEle.checked) {
        for (var i = 0; i < checkones.length; i++) {
            checkones[i].checked = true;
        }
    } else {
        for (var i = 0; i < checkones.length; i++) {
            checkones[i].checked = false;
        }
    }
}

//点击删除，删除当前行
function delete_row(r){
    var row=document.getElementById(r).rowIndex; 
    document.getElementById("tb").deleteRow(row);
    setBgC() ;
}
//添加行
function insert_row(){
        var addTable=document.getElementById("tb");
        var row_index=addTable.rows.length;       //新插入行在表格中的位置
        var newRow=addTable.insertRow(row_index);  //插入新行
        newRow.id="row"+row_index;                 //设置新插入行的ID
        var col0=newRow.insertCell(0);
        col0.innerHTML="<input type='checkbox' name='choose' />";
        var col1=newRow.insertCell(1);
        col1.innerHTML="<input type='text' style='width:40px;' value='' />"; 
        var col2=newRow.insertCell(2);
        col2.innerHTML="<input type='text' style='width:40px;' value=''/>"; 
        var col3=newRow.insertCell(3);
        col3.innerHTML="<input type='text' style='width:40px;' value=''/>"; 
        var col4=newRow.insertCell(4);
        col4.innerHTML="<input type='text' style='width:40px;' value='' />"; 
        var col5=newRow.insertCell(5);
        col5.innerHTML="<input type='text' style='width:40px;' value='' />"; 
        var col6=newRow.insertCell(6);
        col6.innerHTML="<input type='button' value='删除' onclick=\"delete_row('row"+row_index+ "')\" />&nbsp;<input type='button' name='del' value='保存' onclick=\"up('row"+row_index+ "')\" />";         
        setBgC();
}
//修改行
function update_row(r){
    var row=document.getElementById(r).rowIndex;
    var c=document.getElementById(r).cells;//获得某一行所有单元格的集合
    var t1=c[1].innerHTML;
    c[1].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t1+"' />";
    var t2=c[2].innerHTML;
    c[2].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t2+"' />";
    var t3=c[3].innerHTML;
    c[3].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t3+"' />";
    var t4=c[4].innerHTML;
    c[4].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t4+"' />";
    var t5=c[5].innerHTML;
    c[5].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t5+"' />";
    c[6].lastChild.value="保存"; 

    c[6].lastChild.setAttribute("onclick","up('"+r+ "')");
    }
  function up(r){
    var row=document.getElementById(r).rowIndex;   //修改行所在表格中的位置
    var c=document.getElementById(r).cells;
    var t1=c[1].firstChild.value;
    c[1].innerHTML=t1;
    var t2=c[2].firstChild.value;
    c[2].innerHTML=t2;
    var t3=c[3].firstChild.value;
    c[3].innerHTML=t3;
    var t4=c[4].firstChild.value;
    c[4].innerHTML=t4;
    var t5=c[5].firstChild.value;
    c[5].innerHTML=t5;
    c[6].lastChild.value="修改";
    c[6].lastChild.setAttribute("onclick","update_row('"+r+ "')");
    }

lzsan_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
表格页面前端实现

表格页面：奇数行和偶数行颜色不同，鼠标移上去变色，点击选择也变色，点上面的增加按钮就增加一行，输入内容后，点击最右边的保存，点击删除可以删掉此行，点修改可以修改此行。，点击最上面的复选框，下面的全选。index.html:<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
复制链接

扫一扫