no `for` & create Array 100

[xgqfrms]

no for & create Array 100

new Uint8Array(100).map((item, i) => (item = i));

// Uint8Array(100) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]

---

Uint8Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array

https://en.wikipedia.org/wiki/Bit_array

https://stackoverflow.com/questions/29523206/how-do-i-write-an-8-bit-array-to-a-16-bit-array-of-1-2-size https://stackoverflow.com/questions/33793246/c-converting-8-bit-values-into-16-bit-values

Typed Arrays

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

new_arr = new Uint8Array(100); // new in ES2017

// Uint8Array(100) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

old_arr = new Array(100);
// (100) [empty × 100]

[xgqfrms]

https://github.com/gildata/RAIO/issues/325#issuecomment-385839196

[xgqfrms]

NodeList to Array

let all_btns = document.querySelectorAll(`[data-uid="all"]`),
    add_btns = document.querySelectorAll(`[data-uid="add"]`);
setTimeout(() => {
    [...all_btns].forEach(
        (btn, i) => {
            btn.addEventListener(`click`, (e) => {
                console.log(`all e =`, e);
            });
        }
    );
    [...add_btns].forEach(
        (btn, i) => {
            btn.addEventListener(`click`, (e) => {
                console.log(`add e =`, e);
            });
        }
    );
}, 0);

[xgqfrms]

get form checkbox data in js

https://stackoverflow.com/questions/3547035/javascript-getting-html-form-values

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements_index

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

git ignore

[xgqfrms]

https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox

http://javascript-coder.com/javascript-form/javascript-get-check.phtml

https://www.go4expert.com/articles/getting-checkbox-value-s-html-form-jsp-t4542/

[xgqfrms]

HTML5 files upload progress

http://christopher5106.github.io/web/2015/12/13/HTML5-file-image-upload-and-resizing-javascript-with-progress-bar.html

https://www.sitepoint.com/html5-javascript-file-upload-progress-bar/

https://stackoverflow.com/questions/21646626/file-uploads-percentage-completed-progress-bar

[xgqfrms]

html5 push notifications

https://www.html5rocks.com/en/tutorials/notifications/quick/

https://github.com/alexgibson/notify.js

https://stackoverflow.com/questions/32501619/how-can-i-do-push-notifications-in-an-html5-web-application

https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web

https://www.home-assistant.io/components/notify.html5/

HTML5 Push Notifications

https://erpfm.com/html5-push-notifications/

https://erpfm.com/the-future-of-html5/

https://erpfm.com/what-are-push-notifications/

demo

http://www.bennish.net/web-notifications.html

---

Web Notifications

W3C Recommendation 22 October 2015

https://www.w3.org/TR/notifications/

[xgqfrms]

tracker.js

http://www.bennish.net/js/awstats_misc_tracker.js

[xgqfrms]

HTML5

https://github.com/xgqfrms/learning/tree/gh-pages/HTML5

https://github.com/xgqfrms/learning/tree/gh-pages/HTML5/FileReader%20API

W3C

https://github.com/xgqfrms/learning/tree/gh-pages/W3C/

https://github.com/xgqfrms/learning/tree/gh-pages/W3C/Push%20API

---

https://caniuse.com/#search=push-api

[xgqfrms]

preload prefetch

http://www.webhek.com/post/preload-prefetch-and-priorities-in-chrome.html

headless browser

http://www.webhek.com/post/detecting-chrome-headless.html

[xgqfrms]

https://ttsvetko.github.io/HTML5-Desktop-Notifications

https://github.com/ttsvetko/HTML5-Desktop-Notifications/

https://github.com/ttsvetko/HTML5-Desktop-Notifications/blob/master/src/Notification.js

---

https://www.sitepoint.com/demos/html5desktopalerts/

https://github.com/sdeering/HTML5-Desktop-Notifications

[xgqfrms]

OK

https://www.davidwalsh.name/demo/notifications-api.php

https://davidwalsh.name/notifications-api

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {  // status is "granted", if accepted by user
        var n = new Notification('Title', { 
            body: 'I am the body text!',
            icon: '/path/to/icon.png' // optional
        }); 
    });
}

https://pusher.com/tutorials/realtime-notifications

https://www.binpress.com/tutorial/building-useful-notifications-with-html5-apis/163

http://dangercove.github.io/html5-notifications/

HTML5

https://github.com/xgqfrms/HTML5

https://github.com/xgqfrms/HTML5/tree/gh-pages/history-api

https://www.renfei.org/blog/html5-introduction-3-history-api.html

https://github.com/xgqfrms/HTML5/tree/gh-pages/test-html5

[xgqfrms]

no know key

const data = {
    "name": "test",
    "pro_type": "Base",
    "src_path": "xxx",
    "release_path": "xxx",
    "svn_user": "xyz",
    "org.gil.server.report": "on",
    "Robots": "on"
};
undefined
let keys = Object.keys(data);
// undefined
let result = [];
for (let i = 0; i < keys.length; i++) {
    if (data[keys[i]] !== "on") {
        result.push(keys[i]);
    }
}
// undefined
keys;
// (7) ["name", "pro_type", "src_path", "release_path", "svn_user", "org.gil.server.report", "Robots"]
result
// (5) ["name", "pro_type", "src_path", "release_path", "svn_user"]
result = [];
for (let i = 0; i < keys.length; i++) {
    if (data[keys[i]] === "on") {
        result.push(keys[i]);
    }
}
// 2
result;
// (2) ["org.gil.server.report", "Robots"]

[xgqfrms]

Array & String & Serialization 序列化

JSON.stringify();

no serialize

[xgqfrms]

remove item by index & Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.splice()

let bp = DependencesProjects.indexOf(data.pro_name);
DependencesProjects.splice(bp, 1);

 // update
localStorage.setItem(`depend_pro_names`, DependencesProjects);

[xgqfrms]

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

[xgqfrms]

Array.Reduce

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() without initialValue
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
[                      ].reduce( maxCallback ); // TypeError

// map/reduce; better solution, also works for empty or larger arrays

[ { x: 22 }, { x: 42 } ]
.map( el => el.x )
.reduce( maxCallback2, -Infinity );

[xgqfrms]

Array.flatMap()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

[xgqfrms]

Array.copyWithin()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin

arr.copyWithin(target)
arr.copyWithin(target, start)
arr.copyWithin(target, start, end)

---

Array.fill()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

arr.fill(value[, start[, end]])

[xgqfrms]

Array.filter()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

new

const data = {
    "name": "test",
    "pro_type": "Base",
    "src_path": "xxx",
    "release_path": "xxx",
    "svn_user": "xyz",
    "org.gil.server.report": "on",
    "Robots": "on"
};

let keys = Object.keys(data);

const new_result = keys.filter(key => (data[key] === "on"));
// (2) ["org.gil.server.report", "Robots"]

// let result = [];

// for (let i = 0; i < keys.length; i++) {
//     if (data[keys[i]] === "on") {
//         result.push(keys[i]);
//     }
// }

// result;
// (2) ["org.gil.server.report", "Robots"]

old

const data = {
    "name": "test",
    "pro_type": "Base",
    "src_path": "xxx",
    "release_path": "xxx",
    "svn_user": "xyz",
    "org.gil.server.report": "on",
    "Robots": "on"
};
undefined
let keys = Object.keys(data);
// undefined
let result = [];
for (let i = 0; i < keys.length; i++) {
    if (data[keys[i]] !== "on") {
        result.push(keys[i]);
    }
}
// undefined
keys;
// (7) ["name", "pro_type", "src_path", "release_path", "svn_user", "org.gil.server.report", "Robots"]
result
// (5) ["name", "pro_type", "src_path", "release_path", "svn_user"]
result = [];
for (let i = 0; i < keys.length; i++) {
    if (data[keys[i]] === "on") {
        result.push(keys[i]);
    }
}
// 2
result;
// (2) ["org.gil.server.report", "Robots"]

[xgqfrms]

splice() + indexOf() === filter()

How do I remove a particular element from an array in JavaScript?

https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript

https://stackoverflow.com/questions/369602/php-delete-an-element-from-an-array http://fellowtuts.com/php/delete-element-by-value-from-array-not-by-key/ https://stackoverflow.com/questions/1672156/how-to-delete-an-array-element-based-on-key https://coderanch.com/t/454700/java/Proper-remove-shift-elements-array

[xgqfrms]

format date

send_time": "2018-05-03 02:34:15",

https://momentjs.com/

[xgqfrms]

prefetch & preload

performance optimization 性能优化

<link rel="preload" href="/static/js/app.f0740e69f6377b5e784f.js" as="script">
<link rel="preload" href="/static/js/14.3d579fef7bcc5b20c2cc.js" as="script">

<link rel="preload" href="/static/css/app.d3668b3b356b3a7a2ff319b33312d3b2.css" as="style">

<link rel="prefetch" href="/static/js/12.cbf64669f2914491841d.js">

rel="prerender"

<!DOCTYPE html>
<html lang="en-us" manifest="manifest.appcache">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
    <title>xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!</title>

    <link rel="icon" href="images/logo.png" type="image/png">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">

    <!-- SEO meta -->
    <link rel="author" type="text/plain" href="https://www.xgqfrms.xyz/humans.txt" />
    <link rel="manifest" href="manifest.json">
    <link rel="shortlink" href="https://xgqfrms.xyz/">
    <link rel="copyright" href="https://xgqfrms.xyz/copyright.html">
    <!-- 预呈现和预提取支持:https://msdn.microsoft.com/library/dn265039(v=vs.85).aspx -->

    <!-- 
    <link rel="prerender" href="https://www.webgeeker.xyz/index.html" />
    <link rel="prefetch" href="https://www.webgeeker.xyz/css/style.css" />
    <link rel="dns-prefetch" href="https://www.webgeeker.xyz/" />
    -->
    <!-- Content Security Policy:内容安全策略(CSP) -->
    <!--
    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src 'cdn.xgqfrms.xyz'; child-src 'https: https:'">
    -->
    <!--
    https://realfavicongenerator.net/
    https://css-tricks.com/favicon-quiz/
    -->
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00ff00">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
    <meta name="theme-color" content="#00ccff">
    <!-- HEAD -->
    <!-- <meta name="robots" content="noindex" /> -->
    <meta name="author" content="xgqfrms, webgeeker">
    <meta name="keywords" content="xgqfrms, webgeeker, github, xgqfrms.xyz, webgeeker.xyz, Tutorials, ES5 ES6 ES7, React 2, Angular 2, Ionic 2">
    <meta name="description" content="xgqfrms.xyz : xgqfrms's offical website of GitHub! & xgqfrms, webgeeker, github, xgqfrms.xyz, webgeeker.xyz, Tutorials, ES5 ES6 ES7, React 2, Angular 2, Ionic 2">
    <meta name="application-name" content="xgqfrms.xyz, webgeeker.xyz">
    <meta name="generator" content="Sublime Text 3, Visual Studio Code 1.6, Google Chrome Canary, GitHub, React 2, Angular 2, Ionic 2">
    <meta name="msapplication-TileColor" content="#00ff00" />

    <!-- media query -->
    <!-- RSS -->
    <link href="https://xgqfrms.xyz/feeds/posts.rss" type="application/rss+xml" rel="alternate" title="Blog RSS" />
    <link href="https://xgqfrms.xyz/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Atom Feed" />
</head>

[xgqfrms]

disabled a link

https://stackoverflow.com/questions/5376444/how-do-i-disable-a-href-link-in-javascript

.btn-disabled {
    cursor: not-allowed !important;
    pointer-events: none;
}

    // Select a node on click
    publishBtn.addEventListener(`click`, (e) => {
        let apisName = [...apinamesSet];
        console.log(`publish apisName = \n`, JSON.stringify(apisName, null, 4));
        // once
        e.target.setAttribute("disabled", true);
        e.target.classList.add("btn-disabled");
        e.target.href = "javascript:void(0)";
        e.preventDefault();
        publisProject(apisName);
    });

https://caniuse.com/#feat=pointer-events

https://stackoverflow.com/questions/28318057/html-how-to-disable-a-href

[xgqfrms]

https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explanation

[xgqfrms]

setInterval() & clearInterval()

https://www.w3schools.com/jsref/met_win_setinterval.asp

https://stackoverflow.com/questions/729921/settimeout-or-setinterval

// 5s & interval
let timeUid = setInterval(() => {
    if (istrue) {
        getDatas(`http://10.1.5.202/deploy-platform/mock-json/progress.json`).then(
            (json) => {
                // console.log(`json =`, json);
                window.message = json.data.message;
                // show message
            }
        ).catch(err => console.log(`error = `, err));
    } else {
        clearInterval(timeUid);
    }
}, 5000);

demo

https://jsfiddle.net/GustvandeWal/295jqqqb/

---

setTimeout() & clearTimeout()

https://www.w3schools.com/jsref/met_win_settimeout.asp https://www.w3schools.com/jsref/met_win_cleartimeout.asp

[xgqfrms]

json-server & faker.js

https://www.sitepoint.com/mock-rest-apis-using-json-server/

https://github.com/marak/Faker.js/

[xgqfrms]

eslint es6 syntax & object rest spread

ecmaFeatures.experimentalObjectRestSpread

ecmaVersion: 2018

https://eslint.org/docs/user-guide/configuring

object-rest-spread

https://github.com/tc39/proposal-object-rest-spread https://babeljs.io/docs/plugins/transform-object-rest-spread/

[xgqfrms]

.eslintrc

{
    "env": {
        "browser": true,
        "node": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "comma-dangle": 0,
        "react/jsx-uses-vars": 1,
        "react/display-name": 1,
        "react/prop-types": 1,
        "no-unused-vars": "warn",
        "no-console": 1,
        "no-unexpected-multiline": "warn"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "15.6.1"
        }
    },
    "globals": {
        "window": true,
        "jquery": true,
        "xyz": false
    }
}

[xgqfrms]

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

[xgqfrms]

no copy

oncopy="return false" onpaste="return false"

<input type="password" name="password" ng-model="password" required="" md-maxlength="20" oncopy="return false" onpaste="return false" class="md-input ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-valid-md-maxlength ng-touched" id="input_4" aria-invalid="false" ng-trim="false" style="">

[xgqfrms]

colgroup

https://www.w3schools.com/tags/tag_colgroup.asp

https://www.w3schools.com/tags/att_colgroup_width.asp

https://html.com/tags/colgroup/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup

---

rowspan="2" & colspan="2"

    <section>
        <table class="gildata-table">
            <colgroup>
                <col width="10%" span="2">
                <col width="30%">
                <col width="50%">
            </colgroup>
            <thead class="gildata-thead">
                <tr class="gildata-tr">
                    <th colspan="2">long long long 表头 1</th>
                    <th rowspan="2">表头 2</th>
                    <th rowspan="2">表头 3</th>
                </tr>
                <tr class="gildata-tr">
                    <th>多级表头 1</th>
                    <th>多级表头 2</th>
                </tr>
            </thead>
        </table>
    </section>

[xgqfrms]

regex

https://regexper.com/

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

// test

let str1 = `基金 专题 资产配置 其他 组合重大变动明细`,
    str2 = `基金,专题,资产配置,其他,组合重大变动明细`,
    str3 = `基金, 专题, 资产配置, 其他, 组合重大变动明细`,
    str4 = `基金 ,专题 ,资产配置 ,其他 ,组合重大变动明细`,
    str5 = `基金 , 专题 , 资产配置 , 其他 , 组合重大变动明细`,
    str6 = ` , 基金 , 专题 , 资产配置 , 其他 , 组合重大变动明细 , `;

const stringToArray = (str = ``) => {
    let result = [];
    result = str.replace(/,/ig, " ").trim().replace(/\s+/ig, ",").split(",");
    return result;
};

stringToArray(str6);
// (5) ["基金", "专题", "资产配置", "其他", "组合重大变动明细"]

[xgqfrms]

香瓜

http://www.fruitzj.com/zhonglei/

https://cbu01.alicdn.com/img/ibank/2016/077/726/3247627770_570638688.jpg

[xgqfrms]

“ERR_CONNECTION_TIMED_OUT”

http://troubleshooter.xyz/wiki/fix-err-connection-timed-out-issue-in-google-chrome/

[xgqfrms]

https://static.codepen.io/assets/global/tour-arrow-4357c38d54d83354fe4087f4e8ac594218edf1d458f683b0c5124a91fd473a0f.svg

svg & roate

tour & toturial

[xgqfrms]

固定表头 & fixed table header

https://codepen.io/webgeeker/full/jxLBPw/

[xgqfrms]

const json = {
    "keys": ["aaa","bbb"],
    "data": {
        "aaa": [
            {
                "date": "2018-05-04 06:59:48",
                "auther": "xxx",
                "jiraId": null,
                "message": "test部署平台拉取日志 1"
            },
            {
                "date": "2018-05-04 06:59:48",
                "auther": "zzz",
                "jiraId": null,
                "message": "test部署平台拉取日志 2"
            }
        ],
        "bbb": [
            {
                "date": "2018-05-04 06:59:48",
                "auther": "vvv",
                "jiraId": null,
                "message": "logs 日志"
            }
        ]
    }
};

let keys = json.keys,
    data = json.data;

let bd = document.querySelector(`body`);
bd.innerHTML = "";

for (let i = 0; i < keys.length; i++) {
    messages = data[keys[i]];
    messages.forEach(obj => {
        let {
            date,
            auther,
            jiraId,
            message
        } = {...obj};
        let str = `
            ${jiraId ? jiraId : ""}: ${message ? message.replace(/\n/ig, "<br/>") : ""}<br/>
        `;
        bd.insertAdjacentHTML(`beforeend`, str);
        // return str;
    });
}

[xgqfrms]

https://codepen.io/xgqfrms-gildata/pen/zjdzap

http://imaputz.com/cssStuff/bigFourVersion.html

http://salzerdesign.com/test/fixedTable.html

http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

https://www.cssscript.com/fix-table-header-column/ https://www.cssscript.com/demo/fix-table-header-column/ https://www.cssscript.com/demo/fix-table-header-column/fixed-table.css https://www.cssscript.com/demo/fix-table-header-column/fixed-table.js

https://stackoverflow.com/questions/37272331/html-table-with-fixed-header-and-footer-and-scrollable-body-without-fixed-widths

https://codepen.io/xgqfrms-gildata/pen/ELvwvV

click & get Row datas

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS: fixed table header</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            overflow: auto;
        }

        thead {
            display: block;
            width: 100%;
            overflow: auto;
            color: #fff;
            background: #000;
            max-width: 500px;
        }

        tbody {
            display: block;
            width: 100%;
            height: 200px;
            background: pink;
            overflow: auto;
            max-width: 500px;
        }

        th,
        td {
            padding: .5em 1em;
            text-align: left;
            vertical-align: top;
        }

        th:nth-of-type(n + 1),
        td:nth-of-type(n + 1) {
            border-left: 1px solid #fff;
        }

        tr:nth-of-type(n + 1) {
            border-bottom: 1px solid #fff;
        }

        tbody tr:hover {
            cursor: pointer;
            background: rgb(247, 3, 44);
        }

        th:nth-of-type(1),
        td:nth-of-type(1) {
            width: 200px;
            min-width: 200px;
        }

        th:nth-last-of-type(1),
        td:nth-last-of-type(1) {
            width: 400px;
            min-width: 200px;
        }

        .col {
            width: 300px;
        }
    </style>
</head>

<body>
    <section>
        <table>
            <colgroup>
                <col class="col">
                <col class="col">
            </colgroup>
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
            </thead>
        </table>
    </section>
    <section>
        <table>
            <colgroup>
                <col class="col">
                <col class="col">
            </colgroup>
            <tbody>
                <tr>
                    <td>Cell 1, Row 1</td>
                    <td>Cell 2, Row 1</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 2</td>
                    <td>Cell 2, Row 2</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 3</td>
                    <td>Cell 2, Row 3</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 4</td>
                    <td>Cell 2, Row 4</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 5</td>
                    <td>Cell 2, Row 5</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 6</td>
                    <td>Cell 2, Row 6</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 7</td>
                    <td>Cell 2, Row 7</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 8</td>
                    <td>Cell 2, Row 8</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 9</td>
                    <td>Cell 2, Row 9</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 10</td>
                    <td>Cell 2, Row 10</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 11</td>
                    <td>Cell 2, Row 11</td>
                </tr>
                <tr>
                    <td>Cell 1, Row 12</td>
                    <td>Cell 2, Row 12</td>
                </tr>
            </tbody>
        </table>
    </section>
    <!-- js -->
    <script>
        let trs = [...document.querySelectorAll(`tbody tr`)];
        trs.forEach((tr) => {
            tr.addEventListener(`click`, (e) => {
                console.log(`e =\n`, e);
                // td / cell
                // console.log(`e.target.innerHTML =\n`, e.target.innerHTML);
                // tr
                // console.log(`e.target.parentNode =\n`, e.target.parentNode);
                // console.log(`e.target.parentNode.children =\n`, e.target.parentNode.children);
                // console.log(`e.target.parentElement.Text =\n`, e.target.parentElement.innerText);
                let tds = [...e.target.parentNode.children],
                    result = [];
                for (let i = 0; i < tds.length; i++) {
                    let value = tds[i].innerText;
                    result.push(value);
                }
                // get Row Datas
                console.log(`result =\n`, result);
                window.ROW = [];
                window.ROW = result;
                return result;
            });
        });
    </script>
</body>

</html>

[xgqfrms]

click get table row data

https://codepen.io/webgeeker/pen/odeGpZ

https://codepen.io/xgqfrms-gildata/pen/gzxGGv