Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement