Bootstrap表格操作 | 易学教程

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="3.3.5/js/bootstrap.min.js"></script>
    <style>

        .zhen {
            margin-top: 120px;
        }

        #table {
            text-align: center;
        }

        th {
            text-align: center;
            width: auto;
        }

        td {
            width: auto;
        }
    </style>

</head>
<body>

<div class="container-fluid zhen">
    <div class="row col-md-8 col-md-offset-2">
        <form class="form-inline">
            <label for="number">编号</label>
            <input type="text" class="form-control" id="number">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name">
            <label for="age">年龄</label>
            <input type="text" class="form-control" id="age">
            <input type="button" class="btn btn-default" id="btn_add" value="添加">
        </form>
    </div>
    <div class="row col-md-8 col-md-offset-2">
        <div class="table-responsive ">
            <table class="table table-hover table-bordered " id="table">
                <thead>
                <th><input type="checkbox" value="" class="hao" id="one"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
                </thead>
                <tbody id="tbody">
                <tr>
                    <td><input type="checkbox" value="" class="hao"></td>
                    <td>hhhh</td>
                    <td>hhhh</td>
                    <td>hhhh</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="ha(this);">修改</button>
                        <button type="button" class="btn btn-danger" onclick="de(this);">删除</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="" class="hao"></td>
                    <td>hhhh</td>
                    <td>hhhh</td>
                    <td>hhhh</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="ha(this);">修改</button>
                        <button type="button" class="btn btn-danger" onclick="de(this);">删除</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="" class="hao"></td>
                    <td>hhhh</td>
                    <td>hhhh</td>
                    <td>hhhh</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="ha(this);">修改</button>
                        <button type="button" class="btn btn-danger" onclick="de(this);">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row col-md-8 col-sm-offset-2">
        <div>
            <input type="button" class="btn btn-default" value="全选" id="all_btn">
            <input type="button" class="btn btn-default" value="全不选" id="no_btn">
            <input type="button" class="btn btn-default" value="反选" id="re_btn">
        </div>
    </div>
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    $("btn_add").onclick = function () {
        $("tbody").innerHTML += "<tr> " +
            "<td><input type='checkbox' class='hao'></td>" +
            "<td>" + $("number").value + "</td>" +
            "<td>" + $("name").value + "</td>" +
            "<td>" + $("age").value + "</td>" +
            "<td>" +
            "<button type='button' class='btn btn-primary' οnclick='ha(this);'>修改 </button>" +
            "<button type='button' class='btn btn-danger' οnclick='de(this);'>删除</button>" +
            "</td>" +
            "</tr>";
    }

    function de(e) {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);

    }

    $("all_btn").onclick = function () {
        var s = document.getElementsByClassName("hao");
        for (var i = 0; i < s.length; i++) {
            s[i].checked = true;
        }
    }
    $("no_btn").onclick = function () {
        var s = document.getElementsByClassName("hao");
        for (var i = 0; i < s.length; i++) {
            s[i].checked = false;
        }
    }
    $("re_btn").onclick = function () {
        var s = document.getElementsByClassName("hao");
        for (var i = 0; i < s.length; i++) {
            s[i].checked = !s[i].checked;
        }
    }
    $("one").onclick = function () {
        var s = document.getElementsByClassName("hao");
        for (var i = 0; i < s.length; i++) {
            s[i].checked = this.checked;
        }
    }
    $("number").onblur = function () {
        if (this.value.length == 0) {
            return;
        }
        var s = /^\d{4}$/;
        if (!s.test(this.value)) {
            alert("填错了");
        }
    }
    $("name").onblur = function () {
        if (this.value.length == 0) {
            return;
        }
        if (this.value.length < 2 || this.value.length > 4) {
            alert("填错了");
        }
    }
    $("age").onblur = function () {
        if (this.value.length == 0) {
            return;
        }
        if (this.value <= 0 || this.value > 120) {
            alert("填错了");
        }
        var s = /^\d$/;
        if (!s.test(this.value)) {
            alert("填错了");
        }
    }
    var flag = true;
    function ha (e) {
        if (flag) {
            u1(e);
        } else {
            u2(e);
        }
    }

    function u1(e) {
        var childNodes = e.parentNode.parentNode.childNodes;
        for (var i = 2; i < childNodes.length - 2; i++) {
            s = childNodes[i].textContent;
            childNodes[i].innerHTML = "<input type='text' value='" + s + "' id='i" + i + "' style='width: 80px'>";
        }
        e.innerHTML = "确认";
        flag = !flag;
    }

    function u2(e) {
        var childNodes = e.parentNode.parentNode.childNodes;
        for (var i = 2; i < childNodes.length - 2; i++) {


                if($("i" + i)==null){
                    continue;
                }
            childNodes[i].innerText=$("i" + i).value;


        }
        e.innerHTML = "修改";
        flag = !flag;
    }
</script>
</body>
</html>
来源：CSDN
作者：码上说话
链接：https://blog.csdn.net/qq_36943809/article/details/103605723
标签
html表格
input
按钮