SHARE
TWEET

Danh sách HTML

a guest Oct 19th, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head><meta charset="utf-8"/></head>
  3.     <body>
  4.         <table id="table">
  5.             <thead>
  6.                 <tr>
  7.                     <td><input type="checkbox"></td>
  8.                     <td>Họ tên</td>
  9.                     <td>Ngày sinh</td>
  10.                     <td>Giới tính</td>
  11.                 </tr>
  12.             </thead>
  13.             <tbody>
  14.                 <tr>
  15.                     <td><input type="checkbox"></td>
  16.                     <td>A</td>
  17.                     <td>Ngày sinh</td>
  18.                     <td>Giới tính</td>
  19.                 </tr>
  20.                 <tr>
  21.                     <td><input type="checkbox"></td>
  22.                     <td>B</td>
  23.                     <td>Ngày sinh</td>
  24.                     <td>Giới tính</td>
  25.                 </tr>
  26.                 <tr>
  27.                     <td><input type="checkbox"></td>
  28.                     <td>C</td>
  29.                     <td>Ngày sinh</td>
  30.                     <td>Giới tính</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td><input type="checkbox"></td>
  34.                     <td>D</td>
  35.                     <td>Ngày sinh</td>
  36.                     <td>Giới tính</td>
  37.                 </tr>
  38.             </tbody>
  39.         </table>
  40.     </body>
  41.     <script>
  42.         var table = {
  43.             dom: null,
  44.             rowHeader: null,
  45.             rows: []
  46.         };
  47.         var state = {
  48.             checkedAll: false,
  49.             rows: []
  50.         };
  51.  
  52.         initTableStruct(table);
  53.         initState(table, state);
  54.         initStyle(table, state);
  55.         installEvent(table, state);
  56.  
  57.         function initTableStruct(table) {
  58.             table.dom = document.getElementById("table");
  59.             thead = table.dom.getElementsByTagName("thead")[0];
  60.  
  61.             table.rowHeader = {
  62.                 dom: thead.getElementsByTagName("tr")[0],
  63.                 cells: [],
  64.                 style: "background-color: cyan;"
  65.             };
  66.             tds = thead.getElementsByTagName("td");
  67.             for (x = 0; x < tds.length; x++) {
  68.                table.rowHeader.cells.push(tds[x]);
  69.            }
  70.  
  71.            tbody = table.dom.getElementsByTagName("tbody")[0];
  72.            domRows = tbody.getElementsByTagName("tr");
  73.            for (x = 0; x < domRows.length; x++) {
  74.                row = {
  75.                    dom: domRows[x],
  76.                    cells: []
  77.                };
  78.                tds = row.dom.getElementsByTagName("td");
  79.                for (y = 0; y < tds.length; y++) {
  80.                    row.cells.push(tds[y]);
  81.                };
  82.                table.rows.push(row);
  83.            }
  84.        }
  85.  
  86.        function initState(table, state) {
  87.            for (x in table.rows) {
  88.                state.rows.push({
  89.                    mouseoverStyle: "background-color: green;",
  90.                    checkedStyle: "background-color: yellow",
  91.                    mouseover: false,
  92.                    checked: false
  93.                });
  94.                if (x % 2 == 0)
  95.                    state.rows[x].normalStyle = "background-color: grey;";
  96.                else
  97.                    state.rows[x].normalStyle = "background-color: blue;";
  98.            }
  99.        }
  100.  
  101.        function initStyle(table, state) {
  102.            for (x in table.rowHeader.cells)
  103.                table.rowHeader.cells[x].setAttribute("style", table.rowHeader.style);
  104.            for (x in table.rows) {
  105.                for (y in table.rows[x].cells) {
  106.                    table.rows[x].cells[y].setAttribute("style", state.rows[x].normalStyle);
  107.                }
  108.            }
  109.        }
  110.  
  111.        function installEvent(table, state) {
  112.            for (x in table.rows) {
  113.                table.rows[x].dom.addEventListener("mouseover", mouseOver.bind(table.rows[x].dom, x, table, state));
  114.                table.rows[x].dom.addEventListener("mouseout", mouseOut.bind(table.rows[x].dom, x, table, state));
  115.                let checkbox = table.rows[x].cells[0].getElementsByTagName("input")[0];
  116.                checkbox.addEventListener("click", clickCheckbox.bind(checkbox, x, table, state));
  117.            }
  118.            let headerCheckbox = table.rowHeader.cells[0].getElementsByTagName("input")[0];
  119.            headerCheckbox.addEventListener("click", clickHeaderCheckbox.bind(headerCheckbox, table, state));
  120.        }
  121.  
  122.        function updateStyleForRow(i, table, state) {
  123.            if (state.rows[i].checked) {
  124.                for (x in table.rows[i].cells) {
  125.                    table.rows[i].cells[x].setAttribute("style", state.rows[i].checkedStyle);
  126.                }
  127.            }
  128.            else if (state.rows[i].mouseover) {
  129.                for (x in table.rows[i].cells) {
  130.                    table.rows[i].cells[x].setAttribute("style", state.rows[i].mouseoverStyle);
  131.                }
  132.            }
  133.            else {
  134.                for (x in table.rows[i].cells) {
  135.                    table.rows[i].cells[x].setAttribute("style", state.rows[i].normalStyle);
  136.                }
  137.            }
  138.        }
  139.  
  140.        function mouseOver(i, table, state) {
  141.            state.rows[i].mouseover = true;
  142.            updateStyleForRow(i, table, state);
  143.        }
  144.  
  145.        function clickCheckbox(i, table, state) {
  146.            state.rows[i].checked = !state.rows[i].checked;
  147.            updateStyleForRow(i, table, state);
  148.        }
  149.  
  150.        function clickHeaderCheckbox(table, state) {
  151.            state.checkedAll = !state.checkedAll;
  152.            for (x in state.rows) {
  153.                state.rows[x].checked = state.checkedAll;
  154.                table.rows[x].cells[0].getElementsByTagName("input")[0].checked = state.rows[x].checked;
  155.                updateStyleForRow(x, table, state);
  156.            }
  157.        }
  158.  
  159.        function mouseOut(i, table, state) {
  160.            state.rows[i].mouseover = false;
  161.            updateStyleForRow(i, table, state);
  162.        }
  163.    </script>
  164. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top