Toturials #4
Comments
get form checkbox data in jshttps://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);
}
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/ git ignore
|
prefetch & preload
<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"> |
no copy
<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=""> |
|
|
colgroup & col <section>
<table class="gildata-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead class="gildata-thead">
<tr class="gildata-tr">
<th colspan="2">long long long 表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
</tr>
<tr class="gildata-tr">
<th>多级表头 1</th>
<th>多级表头 2</th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</section>
<section>
<table class="gildata-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<tbody class="gildata-tbody">
<tr class="gildata-tr">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr class="gildata-tr">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr class="gildata-tr">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
</table>
</section> |
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> |
regexhttps://regexper.com/#%2F(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)((%3F%3D(%5B0-9%5D%7B1%2C6%7D)))(12)%2F regexhttps://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) ["基金", "专题", "资产配置", "其他", "组合重大变动明细"]
|
scroll fixed header
|
|
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://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> |
click get table row data |
Date.prototype.format = function (format) {
/*
* format="yyyy-MM-dd hh:mm:ss";
*/
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}; |
|
history.back(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Toturials
https://www.sitepoint.com/mock-rest-apis-using-json-server/
https://egghead.io/lessons/javascript-creating-demo-apis-with-json-server
typicode#513
xyz-data/json#1
xyz-data/redux-seeds#13
https://github.com/xgqfrms-GitHub/json-server/blob/master/prop-app/fetch-api-all-in-one.js
The text was updated successfully, but these errors were encountered: