day5 表单的全选和表格样式的新体会

最新推荐文章于 2024-08-21 14:09:37 发布

亦昭昭

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量416

点赞数 15

分类专栏：记录前端学习文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/z240113765/article/details/135447247

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

效果图展示

在这里插入图片描述
以上为实现效果，可以一键全选，可以一件全不选，也可以删除勾选的数据。
在表格样式上我有了新的学习，见下图：

在设置完td的样式后，可以看到该表格的框有两条线，为了使其只显示一条线，可以加入以下代码：
border-collapse: collapse;

完整代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>选择</title>
    <script type="text/javascript" src="tick.js"></script>
    <link rel="stylesheet" href="tick.css">
</head>

<body>
    <table>
        <tr>
            <td><input type="checkbox" name="ids" onclick="checkall();"></td>
            <td>用户id</td>
            <td>用户名</td>
        </tr>
        <tr id="tr1" onmouseover="addclass(1);" onmouseout="removeclass(1);">
            <td><input type="checkbox" name="ids" value="1" onclick="checkone();"></td>
            <td>1</td>
            <td>飞云</td>
        </tr>
        <tr id="tr2" onmouseover="addclass(2);" onmouseout="removeclass(2);">
            <td><input type="checkbox" name="ids" value="2" onclick="checkone();"></td>
            <td>2</td>
            <td>渝爱</td>
        </tr>
        <tr id="tr3" onmouseover="addclass(3);" onmouseout="removeclass(3);">
            <td><input type="checkbox" name="ids" value="3" onclick="checkone();"></td>
            <td>3</td>
            <td>青花</td>
        </tr>
        <tr id="tr4" onmouseover="addclass(4);" onmouseout="removeclass(4);">
            <td><input type="checkbox" name="ids" value="4" onclick="checkone();"></td>
            <td>4</td>
            <td>青露</td>
        </tr>
        <tr>
            <td colspan="3"><input type="button" value="删除" id="delbtn" onclick="deldata()"></td>
        </tr>
    </table>
</body>

</html>

function checkall() {
    var box = document.getElementsByName("ids");
    if (box[0].checked) {
        //console.log("打勾");
        for (var i = 0; i < box.length; i++) {
            box[i].checked = true;
        }
        document.getElementById("delbtn").disabled = '';
    } else {
        for (var i = 0; i < box.length; i++) {
            box[i].checked = false;
        }
        //console.log("取消打勾")；
        document.getElementById("delbtn").disabled = 'disabled';
    }
}
//监听每个选项
function checkone() {
    var box = document.getElementsByName("ids");
    var result = true;//默认全选
    for (var i = 1; i < box.length; i++) {
        if (box[i].checked == false) {
            result = false;
            break;
        }
    }
    if (result == false) {
        box[0].checked = false;
    } else {
        box[0].checked = true;
    }

    var result1 = false;
    for (var i = 1; i < box.length; i++) {
        if (box[i].checked) {//有一条被选中，删除按钮就打开
            result1 = true;
            break;
        }
    }
    if (result1) {
        document.getElementById("delbtn").disabled = '';
    } else { document.getElementById("delbtn").disabled = 'disabled'; }
}
function deldata() {
    var box = document.getElementsByName("ids");
    var str = "";

    for (var i = 1; i < box.length; i++) {
        if (box[i].checked) {
            str += box[i].value + ",";
        }
    }
    //提醒
    if (confirm("确定删除id是" + str + "的数据吗")) {
        location.href = "http://baidu.com?ids" + str;
    } else {
        alert("你取消了删除操作");
    }
}
function addclass(index) {
    document.getElementById("tr" + index).className = 'add';
}
function removeclass(index) {
    document.getElementById("tr" + index).className = '';
}