动态表格啊

最新推荐文章于 2024-07-23 18:15:45 发布

dundundunsis

最新推荐文章于 2024-07-23 18:15:45 发布

阅读量332

点赞数 11

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/dundundunsis/article/details/134975814

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
            /*合并边框*/
        }

        td {
            border: 1px solid black;

        }

        tr:nth-child(2n+1) {
            color: black;
            background-color: white;
        }

        tr:nth-child(2n) {
            color: white;
            background-color: black;
        }

        button {
            display: inline-block;
        }

        #form {
            border: 1px solid black;
            /* display: inline-block; */
            width: 200px;
            position: absolute;
            top: 0;
            left: 500px;
            display: none;
        }
        span{
            width: 50px;
        }
        
    </style>
</head>

<body>
    <button id="add">add</button>
    <button id="tj">提交</button>
    <table>

        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>二级学院</td>
            <td>班级</td>
            <td>专业</td>
            <td>辅导员</td>

        </tr>

        <tr id="tt">
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td><a><button>delete</button></a></td>

        </tr>
        <tr id="tt">
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td><a><button>delete</button></a></td>

        </tr>
        <tr id="tt">
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td><a><button>delete</button></a></td>

        </tr>
        <tr id="tt">
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td><a><button>delete</button></a></td>

        </tr>

    </table>
    <div id="form">
        <div><span>学号</span><input type="text" id="xh"></div>
        <div><span>姓名</span><input type="text" id="xm"></div>
        <div><span>性别</span><input type="text" id="xb"></div>
        <div><span>二级学院</span><input type="text" id="ejxy"></div>
        <div><span>班级</span><input type="text" id="bj"></div>
        <div><span>专业</span><input type="text" id="zy"></div>
        <div><span>辅导员</span><input type="text" id="fdy"></div>
        
    </div>
    
    <script src="./动态表格.js"></script>
</body>

</html>

var add = document.querySelector("#add")

var tj = document.querySelector("#tj")
var table = document.querySelector("table")
var form = document.querySelector("#form")
var tr = document.createElement("tr")




add.onclick = function () {
    form.style.display = "block"
    tj.onclick = function () {
        var xh = document.getElementById("xh").value
        var xm = document.getElementById("xm").value
        var xb = document.getElementById("xb").value
        var ejxy = document.getElementById("ejxy").value
        var bj = document.getElementById("bj").value
        var zy = document.getElementById("zy").value
        var fdy = document.getElementById("fdy").value

        tr.innerHTML =
            "<td>" + xh + "</td>" +
            "<td>" + xm + "</td>" +
            "<td>" + xb + "</td>" +
            "<td>" + ejxy + "</td>" +
            "<td>" + bj + "</td>" +
            "<td>" + zy + "</td>" +
            "<td>" + fdy + "</td>" +
            "<td><button><a>delete</a></button></td>"
            form.style.display = "none"

    }


    table.appendChild(tr)
}


var a = document.querySelectorAll("a")
// var trr=delet.parentNode.parentNode



for (var i = 0; i < a.length; i++) {
    a[i].onclick = function (a) {
        var tr = this.parentNode.parentNode
        var chose = confirm("你确定要删除这一行信息吗")
        if (chose == true) {
            tr.parentNode.removeChild(tr)
        }
    }
}


var tl = document.querySelector("tr").length
for (var j = 0; j < tl; j++) {
    var jd = j % 2
    tr[jd].style.color = "black"
}