表格的增刪改demo

前端菜鳥，下午沒什麼活兒，寫了個不過腦子的demo，
十分喜歡妖尾，就用妖尾做了模擬數據，大夥兒輕噴。
設計感爲0，頁面配色醜得我都不想看，在此膜拜我司UI工程師，
很多實現功能的地方沒有想到更好的辦法，希望各位大佬斧正！

效果圖

html結構

<body>
    <div class="contain">
        <table>
            <thead>
                <tr>
                    <td><input type="checkbox" name="tail" id="" class="checkall"></td>
                    <td>姓名</td>
                    <td>性別</td>
                    <td>公會</td>
                    <td>屬性</td>
                    <td>級別</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="tail" id=""></td>
                    <td>name1</td>
                    <td>sex1</td>
                    <td>party1</td>
                    <td>proper1</td>
                    <td>level1</td>
                    <td>
                        <div class="ope edit">編輯</div>
                        <div class="ope del">刪除</div>
                    </td>
                </tr>

            </tbody>
        </table>
        <div class="footer">
            <div class="ope add">添加</div>
            <div class="ope delall">刪除</div>
        </div>
    </div>
    <div class="mask"></div>
    <div class="model">
        <div class="name">
            <label for="">
                姓名:
                <input type="text" name="" id="">
            </label>
        </div>
        <div class="sex">
            性別:
            <select>
                <option value="">請選擇</option>
                <option value="女">女</option>
                <option value="男">男</option>
            </select>
        </div>
        <div class="party">
            公會:
            <select>
                <option value="">請選擇</option>
                <option value="妖精的尾巴">妖精的尾巴</option>
                <option value="劍齒之虎">劍齒之虎</option>
                <option value="蛇姬之鱗">蛇姬之鱗</option>
                <option value="魔女之罪">魔女之罪</option>
            </select>
        </div>
        <div class="proper">
            <label for="">
                屬性:
                <input type="text" name="" id="">
            </label>
        </div>
        <div class="level">
            級別:
            <select>
                <option value="">請選擇</option>
                <option value="普通">普通</option>
                <option value="S">S</option>
                <option value="SS">SS</option>
                <option value="百年">百年</option>
                <option value="END">END</option>
            </select>
        </div>
        <div>
            
            <div class="ope false">取消</div>
            <div class="ope true">確定</div>
        </div>
    </div>
    <script src="./js/jquery-3.1.0.min.js"></script>
    <script src="./js/main.js"></script>
</body>

css樣式

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.contain {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
}
table {
    width: 800px;
    margin: 0 auto;
}

thead tr {
    background-color: #009BCD;
    color: #fff;
}

tr {
    color: #000;
    height: 30px;
    line-height: 30px;
    background-color: #eee;
    text-align: center;
}

td {
    display: inline-block;
}

td:nth-child(1) {
    width: 5%;
}
td:nth-child(2) {
    width: 20%;
}
td:nth-child(3) {
    width: 5%;
}
td:nth-child(4) {
    width: 19%;
}
td:nth-child(5) {
    width: 19%;
}
td:nth-child(6) {
    width: 10%;
}
td:nth-child(7) {
    width: 20%;
}


.ope {
    color: #fff;
    width: 30%;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    margin: 10px;
    padding: 3px;
    cursor: pointer;
}

.edit {
    float: left;
    background-color: #00C4E1;
    border: 1px solid #54AAC4;
}

.del {
    float: right;
    background-color: #EA4D45;
    border: 1px solid #B84F4D;
}

.tractive {
    background-color: #ddd;
}
.footer {
    height: 50px;
}
.add {
    width: 50px;
    background-color: #51A736;
    border: 1px solid #319517;
    text-align: center;
    float: left;
}
.delall {
    width: 50px;
    background-color: #EA4D45;
    border: 1px solid #B84F4D;
    text-align: center;
    float: left;
}
.mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.model {
    background-color: #eee;
    border: 5px dashed #009DCE;
    width: 300px;
    padding: 20px 30px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #333;
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.model>div {
    height: 40px;
    line-height: 40px;
}
.model input {
    height: 25px;
    width: 170px;
}
.model select {
    height: 30px;
    width: 175px;
}
.true {
    width: 50px;
    background-color: #51A736;
    border: 1px solid #319517;
    text-align: center;
    float: right;
}
.false {
    width: 50px;
    background-color: #EA4D45;
    border: 1px solid #B84F4D;
    text-align: center;
    float: right;
}

獲取數據

從存儲中取數據，如果存儲中滅有數據，從json文件中取模擬數據
ajax默認是異步，防止出現listAll爲空的情況，這裏將ajax手動設置爲同步，async值設置爲false

// 取數據
var temp = localStorage.getItem("temp");
// 獲取對象數據
var listAll = JSON.parse(temp);
// 若沒有緩存，從模擬json中獲取數據
if (temp == null) {
    var alldata = [];
    $.ajax({
        url: "./tail.json",
        async: false,
        type: "post",
        dataType: "json",
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                alldata.push(data[i]);
            };
            localStorage.setItem("temp", JSON.stringify(alldata));
            temp = localStorage.getItem("temp");
            listAll = JSON.parse(temp);
        }
    })
}

//執行函數
redata();
modelope();
delall();
check();

渲染表格函數

渲染表格的時候，同時將此時的listAll存入本地

// 渲染表格函數
function redata() {
    var str = "";
    for (var i = 0; i < listAll.length; i++) {
        str +=
            '<tr>' +
            '<td><input type="checkbox" name="tail" id="" class="checksin"></td>' +
            '<td>' + listAll[i].name + '</td>' +
            '<td>' + listAll[i].sex + '</td>' +
            '<td>' + listAll[i].party + '</td>' +
            '<td>' + listAll[i].proper + '</td>' +
            '<td>' + listAll[i].level + '</td>' +
            '<td>' +
            '    <div class="ope edit">編輯</div>' +
            '    <div class="ope del">刪除</div>' +
            '</td>' +
            '</tr>'
    }
    $("tbody").html(str);
    localStorage.setItem("temp", JSON.stringify(listAll));
}

添加、編輯、單項刪除

添加功能和編輯功能用的是同一個模塊，這裏設置了一個flag，用來判斷是添加動作還是編輯動作
添加動作時，打開模板的時候，清空一下所有的內容
點擊模態框確定按鈕時，如果是添加動作，就執行push。如果是編輯動作，就執行重新賦值操作
添加、編輯、單項刪除動作執行完畢之後，都重新渲染一遍table表格

// 添加、編輯、單項刪除
function modelope() {
    var flag = "";
    var index;
    // 添加
    $(".footer .add").on("click", function () {
        flag = "add";
        $(".mask").show();
        $(".model").show();
        $(".model .name input").val("");
        $(".model .sex select").val("");
        $(".model .party select").val("");
        $(".model .proper input").val("");
        $(".model .level select").val("");
    });
    // 模態框取消按鈕
    $(".model .false").on("click", function () {
        $(".mask").hide();
        $(".model").hide();
    });
    // 模態框確定按鈕
    $(".model .true").on("click", function () {
        $(".mask").hide();
        $(".model").hide();

        if (flag == "add") {
            var name = $(".model .name input").val();
            var sex = $(".model .sex select").val();
            var party = $(".model .party select").val();
            var proper = $(".model .proper input").val();
            var level = $(".model .level select").val();
            listAll.push({
                "name": name,
                "sex": sex,
                "party": party,
                "proper": proper,
                "level": level
            });
        } else if (flag == "edit") {
            listAll[index].name = $(".model .name input").val();
            listAll[index].sex = $(".model .sex select").val();
            listAll[index].party = $(".model .party select").val();
            listAll[index].proper = $(".model .proper input").val();
            listAll[index].level = $(".model .level select").val();
        }

        redata();

    });

    // 刪除
    $("tbody").on("click", ".del", function () {
        var index = $(this).parents("tr").index();
        listAll.splice(index, 1);
        redata();
    });

    // 編輯
    $("tbody").on("click", ".edit", function () {
        flag = "edit";
        index = $(this).parents("tr").index();
        $(".mask").show();
        $(".model").show();
        $(".model .name input").val(listAll[index].name);
        $(".model .sex select").val(listAll[index].sex);
        $(".model .party select").val(listAll[index].party);
        $(".model .proper input").val(listAll[index].proper);
        $(".model .level select").val(listAll[index].level);
    });
}

全選按鈕狀態改變

利用checkbox類型input的checked屬性判斷
獲取checkall元素的屬性值，並且遍歷所有的checksin元素，將這個屬性值賦給所有的checksin
checksin如果是選中的，累加，和全部長度比較
checksin存在一個未選中，則，全選按鈕未選中

// 全選按鈕狀態改變
function check() {
    $(".checkall").on("click", function () {
        // checked是DOM元素的一個屬性，需要通過[0]訪問
        var flag = $(this)[0].checked;
        $(".checksin").each(function () {
            $(this)[0].checked = flag;
        })
    });
    $(".checksin").on("click", function () {
        var i = 0;
        $(".checksin").each(function () {
            // 存在一個未選中，則，全選按鈕未選中
            if ($(this)[0].checked == false) {
                $(".checkall")[0].checked = false;
            } else {
                // 如果是選中的，累加，和全部長度比較
                i += 1;
                if (i == $(".checksin").length) {
                    $(".checkall")[0].checked = true;
                }
            }

        })
    });

}

批量刪除操作

遍歷所有的checksin元素，如果是被選中的，移除此項所在的tr
獲取頁面的表格內容，將listAll清空之後，重新將表格內容放到listAll中
這裏不知道直接對listAll的方法，使用單項刪除的splice的方法行不通，因爲listAll的長度在實時改變
這裏求大佬指教有沒有好的辦法

// 批量刪除
function delall() {
    $(".footer .delall").on("click", function () {
        $("tbody .checksin").each(function () {
            if ($(this)[0].checked == true) {
                $(this).parents("tr").remove();
            }
        });
        listAll = [];
        $("tbody tr").each(function () {
            var name = $(this).children("td").eq(1).html();
            var sex = $(this).children("td").eq(2).html();
            var party = $(this).children("td").eq(3).html();
            var proper = $(this).children("td").eq(4).html();
            var level = $(this).children("td").eq(5).html();
            listAll.push({
                "name": name,
                "sex": sex,
                "party": party,
                "proper": proper,
                "level": level
            });
        })
        localStorage.setItem("temp", JSON.stringify(listAll));
    })
}

模擬的json數據

[{
        "name": "納茲·多拉格尼爾",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "火-滅龍魔導師",
        "level": "END"
    },
    {
        "name": "溫蒂",
        "sex": "女",
        "party": "妖精的尾巴",
        "proper": "空-滅龍魔導師",
        "level": "SS"
    },
    {
        "name": "羅格",
        "sex": "男",
        "party": "劍咬之虎",
        "proper": "影-滅龍魔導師",
        "level": "SS"
    },
    {
        "name": "斯汀",
        "sex": "男",
        "party": "劍咬之虎",
        "proper": "光-滅龍魔導師",
        "level": "SS"
    },
    {
        "name": "克布拉",
        "sex": "男",
        "party": "魔女之罪",
        "proper": "毒-滅龍魔導師",
        "level": "SS"
    },
    {
        "name": "拉庫薩斯",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "雷-滅龍魔導師",
        "level": "百年"
    },
    {
        "name": "葛吉爾",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "鐵-滅龍魔導師",
        "level": "SS"
    }
]

表格的增刪改demo

效果圖

html結構

css樣式

獲取數據

渲染表格函數

添加、編輯、單項刪除

全選按鈕狀態改變

批量刪除操作

模擬的json數據

開源高性能結構化日誌模塊NanoLog

杭州的 IT 崩盤了麼？

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

根據對象中某一屬性，進行排序

表格的增刪改demo

CSS單位計算總結

css中grid屬性的使用

CSS中clip-path屬性的使用

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結