Danh sách HTML

<html>
    <head><meta charset="utf-8"/></head>
    <body>
        <table id="table">
            <thead>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Họ tên</td>
                    <td>Ngày sinh</td>
                    <td>Giới tính</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>A</td>
                    <td>Ngày sinh</td>
                    <td>Giới tính</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>B</td>
                    <td>Ngày sinh</td>
                    <td>Giới tính</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>C</td>
                    <td>Ngày sinh</td>
                    <td>Giới tính</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>D</td>
                    <td>Ngày sinh</td>
                    <td>Giới tính</td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
        var table = {
            dom: null,
            rowHeader: null,
            rows: []
        };
        var state = {
            checkedAll: false,
            rows: []
        };

        initTableStruct(table);
        initState(table, state);
        initStyle(table, state);
        installEvent(table, state);

        function initTableStruct(table) {
            table.dom = document.getElementById("table");
            thead = table.dom.getElementsByTagName("thead")[0];

            table.rowHeader = {
                dom: thead.getElementsByTagName("tr")[0],
                cells: [],
                style: "background-color: cyan;"
            };
            tds = thead.getElementsByTagName("td");
            for (x = 0; x < tds.length; x++) {
                table.rowHeader.cells.push(tds[x]);
            }

            tbody = table.dom.getElementsByTagName("tbody")[0];
            domRows = tbody.getElementsByTagName("tr");
            for (x = 0; x < domRows.length; x++) {
                row = {
                    dom: domRows[x],
                    cells: []
                };
                tds = row.dom.getElementsByTagName("td");
                for (y = 0; y < tds.length; y++) {
                    row.cells.push(tds[y]);
                };
                table.rows.push(row);
            }
        }

        function initState(table, state) {
            for (x in table.rows) {
                state.rows.push({
                    mouseoverStyle: "background-color: green;",
                    checkedStyle: "background-color: yellow",
                    mouseover: false,
                    checked: false
                });
                if (x % 2 == 0)
                    state.rows[x].normalStyle = "background-color: grey;";
                else
                    state.rows[x].normalStyle = "background-color: blue;";
            }
        }

        function initStyle(table, state) {
            for (x in table.rowHeader.cells)
                table.rowHeader.cells[x].setAttribute("style", table.rowHeader.style);
            for (x in table.rows) {
                for (y in table.rows[x].cells) {
                    table.rows[x].cells[y].setAttribute("style", state.rows[x].normalStyle);
                }
            }
        }

        function installEvent(table, state) {
            for (x in table.rows) {
                table.rows[x].dom.addEventListener("mouseover", mouseOver.bind(table.rows[x].dom, x, table, state));
                table.rows[x].dom.addEventListener("mouseout", mouseOut.bind(table.rows[x].dom, x, table, state));
                let checkbox = table.rows[x].cells[0].getElementsByTagName("input")[0];
                checkbox.addEventListener("click", clickCheckbox.bind(checkbox, x, table, state));
            }
            let headerCheckbox = table.rowHeader.cells[0].getElementsByTagName("input")[0];
            headerCheckbox.addEventListener("click", clickHeaderCheckbox.bind(headerCheckbox, table, state));
        }

        function updateStyleForRow(i, table, state) {
            if (state.rows[i].checked) {
                for (x in table.rows[i].cells) {
                    table.rows[i].cells[x].setAttribute("style", state.rows[i].checkedStyle);
                }
            }
            else if (state.rows[i].mouseover) {
                for (x in table.rows[i].cells) {
                    table.rows[i].cells[x].setAttribute("style", state.rows[i].mouseoverStyle);
                }
            }
            else {
                for (x in table.rows[i].cells) {
                    table.rows[i].cells[x].setAttribute("style", state.rows[i].normalStyle);
                }
            }
        }

        function mouseOver(i, table, state) {
            state.rows[i].mouseover = true;
            updateStyleForRow(i, table, state);
        }

        function clickCheckbox(i, table, state) {
            state.rows[i].checked = !state.rows[i].checked;
            updateStyleForRow(i, table, state);
        }

        function clickHeaderCheckbox(table, state) {
            state.checkedAll = !state.checkedAll;
            for (x in state.rows) {
                state.rows[x].checked = state.checkedAll;
                table.rows[x].cells[0].getElementsByTagName("input")[0].checked = state.rows[x].checked;
                updateStyleForRow(x, table, state);
            }
        }

        function mouseOut(i, table, state) {
            state.rows[i].mouseover = false;
            updateStyleForRow(i, table, state);
        }
    </script>
</html>