4-04.데이터테이블 만들기
2023. 3. 30. 15:06ㆍJavascript/자바스크립트 제대로 배워볼래?
4-04.데이터테이블 만들기.html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<input type="text" id="searchTxt" onkeydown="checkEnter(event);" /> <button type="button" onclick="doSearch();">조회</button>
<table id="tb">
<thead>
<tr>
<th onclick="doSort('name');">name</th>
<th onclick="doSort('email');">email</th>
<th onclick="doSort('company');">company</th>
<th onclick="doSort('address');">address</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="/script/4-04.user_data.js"></script>
<script>
var currentData = [];
function doSort(key) {
currentData.sort(function(a,b){
return a[key]>b[key]? 1: a[key]<b[key]?-1 : 0;
});
renderTable(currentData);
}
function checkEnter(event) {
if(event.keyCode == 13) {
doSearch();
}
}
function doSearch() {
var searchText = document.getElementById("searchTxt").value;
if(searchText == "") {
currentData = userList;
renderTable(userList);
}else {
// /pattern/gi
var regExp = new RegExp(searchText,"i");
var data = userList.filter(item => {
if(regExp.test(item.name)) {
return true;
}else if(regExp.test(item.email)) {
return true;
}else if(regExp.test(item.company)) {
return true;
}else if(regExp.test(item.address)) {
return true;
}else {
return false;
}
});
currentData = data;
renderTable(data);
}
}
function renderTable(data) {
var h = [];
data.forEach(item => {
h.push(`<tr>`);
h.push(`<td>${item.name}</td>`);
h.push(`<td>${item.email}</td>`);
h.push(`<td>${item.company}</td>`);
h.push(`<td>${item.address}</td>`);
h.push(`</tr>`);
});
document.querySelector("#tb>tbody").innerHTML = h.join("");
}
</script>
</body>
</html>script/4-04.user_data
var userList = [{
"_id": "60646eed43013f9997469747",
"isActive": false,
"balance": "$2,534.72",
"picture": "http://placehold.it/32x32",
"age": 25,
"eyeColor": "green",
"name": "Henrietta Dickerson",
"gender": "female",
"company": "AVIT",
"email": "henriettadickerson@avit.com",
"phone": "+1 (942) 479-3763",
"address": "302 Dinsmore Place, Fedora, Montana, 3852",
"about": "Eu excepteur labore deserunt ipsum. Ad non et reprehenderit cupidatat consequat eiusmod aute amet ex duis nisi consequat excepteur. Ad magna nulla pariatur magna labore voluptate sit non.\r\n",
"registered": "2016-04-10T05:08:07 -09:00",
"latitude": -27.863287,
"longitude": 19.362095
},
{
"_id": "60646eed345806ed53897ce9",
"isActive": false,
"balance": "$2,333.05",
"picture": "http://placehold.it/32x32",
"age": 24,
"eyeColor": "brown",
"name": "Medina Hopper",
"gender": "male",
"company": "CONFERIA",
"email": "medinahopper@conferia.com",
"phone": "+1 (812) 523-2339",
"address": "482 Stuart Street, Roderfield, Illinois, 1046",
"about": "Ad enim cupidatat ex excepteur eu reprehenderit cillum consequat tempor excepteur ad sint. Dolore irure elit laborum irure. Laboris id duis officia laboris officia et.\r\n",
"registered": "2018-09-18T12:19:42 -09:00",
"latitude": -45.889057,
"longitude": 111.732173
},
{
"_id": "60646eed4caf6f5673b47536",
"isActive": true,
"balance": "$3,091.32",
"picture": "http://placehold.it/32x32",
"age": 26,
"eyeColor": "blue",
"name": "Danielle Berry",
"gender": "female",
"company": "PLEXIA",
"email": "danielleberry@plexia.com",
"phone": "+1 (896) 558-2504",
"address": "758 Humboldt Street, Choctaw, Oregon, 1421",
"about": "Occaecat dolor duis elit adipisicing culpa magna mollit. Et enim Lorem amet ullamco deserunt laboris voluptate est. Nisi dolore ut consectetur nostrud duis laboris enim minim. Excepteur officia Lorem ea culpa qui ex velit eiusmod magna magna est amet.\r\n",
"registered": "2020-02-11T10:20:32 -09:00",
"latitude": 66.138106,
"longitude": 95.397454
},
{
"_id": "60646eed80d49669489807ca",
"isActive": false,
"balance": "$1,344.95",
"picture": "http://placehold.it/32x32",
"age": 36,
"eyeColor": "brown",
"name": "Aguilar Carpenter",
"gender": "male",
"company": "ORBALIX",
"email": "aguilarcarpenter@orbalix.com",
"phone": "+1 (870) 543-2090",
"address": "496 Erasmus Street, Draper, Oklahoma, 5479",
"about": "Sint nisi aliquip sint esse excepteur aliquip irure incididunt. Ad consectetur fugiat commodo veniam irure. Quis proident consequat voluptate eu ut aute reprehenderit. Velit consequat voluptate ex minim sint exercitation ipsum.\r\n",
"registered": "2016-03-15T12:57:35 -09:00",
"latitude": 7.669064,
"longitude": 124.169117
},
{
"_id": "60646eed76d5ddfa333f8ede",
"isActive": false,
"balance": "$3,686.58",
"picture": "http://placehold.it/32x32",
"age": 32,
"eyeColor": "green",
"name": "Carney Burns",
"gender": "male",
"company": "EPLODE",
"email": "carneyburns@eplode.com",
"phone": "+1 (804) 556-3478",
"address": "685 Ridgecrest Terrace, Savannah, South Dakota, 7163",
"about": "Elit sunt ad non ea sit magna ex anim reprehenderit proident irure fugiat non. Excepteur occaecat labore irure enim officia in amet nisi proident. Do deserunt labore exercitation veniam nostrud laborum sint. Cillum tempor minim aute aute in voluptate pariatur cupidatat id pariatur labore duis.\r\n",
"registered": "2017-09-07T11:34:26 -09:00",
"latitude": 0.523036,
"longitude": -37.037814
},
{
"_id": "60646eed63a3bcdbf0c9b3bd",
"isActive": false,
"balance": "$2,430.65",
"picture": "http://placehold.it/32x32",
"age": 33,
"eyeColor": "brown",
"name": "Nikki Craig",
"gender": "female",
"company": "HELIXO",
"email": "nikkicraig@helixo.com",
"phone": "+1 (999) 569-3906",
"address": "610 Suydam Place, Madaket, New Hampshire, 474",
"about": "Dolor ullamco irure tempor dolore nostrud aute sit proident laboris veniam cillum do amet. Id consectetur consequat aliquip ex sunt duis nisi qui. Officia et tempor commodo dolor ex exercitation fugiat proident proident.\r\n",
"registered": "2016-09-04T12:03:47 -09:00",
"latitude": -73.232815,
"longitude": 142.712732
},
{
"_id": "60646eed8fcaace8d93863a1",
"isActive": false,
"balance": "$2,415.18",
"picture": "http://placehold.it/32x32",
"age": 36,
"eyeColor": "blue",
"name": "Velma Beck",
"gender": "female",
"company": "BILLMED",
"email": "velmabeck@billmed.com",
"phone": "+1 (935) 578-3781",
"address": "200 Bergen Avenue, Riner, Minnesota, 8517",
"about": "Exercitation ullamco nostrud laborum dolor veniam officia velit quis ad esse cillum sunt sint anim. Non aliquip et dolor magna reprehenderit mollit. Eu cillum occaecat amet eiusmod.\r\n",
"registered": "2017-06-23T05:15:37 -09:00",
"latitude": 47.179863,
"longitude": 72.397329
},
{
"_id": "60646eed201c5be13d9093ca",
"isActive": true,
"balance": "$1,845.59",
"picture": "http://placehold.it/32x32",
"age": 34,
"eyeColor": "brown",
"name": "Charity Hess",
"gender": "female",
"company": "ATOMICA",
"email": "charityhess@atomica.com",
"phone": "+1 (884) 420-2307",
"address": "925 Barlow Drive, Stewart, Rhode Island, 5349",
"about": "Ex nulla cillum adipisicing ut ad ut elit occaecat excepteur elit ipsum ut. Nisi quis elit qui reprehenderit mollit sint elit cillum deserunt tempor tempor exercitation. Aliquip non minim aute esse aute veniam ut voluptate.\r\n",
"registered": "2018-03-18T01:42:39 -09:00",
"latitude": 21.39701,
"longitude": 11.682394
},
{
"_id": "60646eed31ab2cc97ccb82ee",
"isActive": false,
"balance": "$1,569.87",
"picture": "http://placehold.it/32x32",
"age": 40,
"eyeColor": "brown",
"name": "Mcclure Sears",
"gender": "male",
"company": "ZOLAREX",
"email": "mccluresears@zolarex.com",
"phone": "+1 (809) 562-2798",
"address": "948 Branton Street, Staples, Missouri, 5901",
"about": "Aliqua laborum aliqua ut esse ex excepteur tempor proident quis excepteur. Anim magna Lorem elit non mollit aliqua laboris aute mollit tempor consequat. Aliqua reprehenderit nulla enim do culpa et est quis consequat ex. Enim excepteur pariatur sunt culpa ex eu.\r\n",
"registered": "2016-04-07T12:11:50 -09:00",
"latitude": -4.592364,
"longitude": -121.41523
},
{
"_id": "60646eed05078e67093983bb",
"isActive": false,
"balance": "$1,278.78",
"picture": "http://placehold.it/32x32",
"age": 30,
"eyeColor": "blue",
"name": "Davis Juarez",
"gender": "male",
"company": "PROTODYNE",
"email": "davisjuarez@protodyne.com",
"phone": "+1 (994) 538-3359",
"address": "717 Roosevelt Place, Blanford, Maine, 2550",
"about": "Ex aliqua excepteur adipisicing cupidatat est deserunt sint sunt. Enim qui tempor duis nisi laboris cupidatat adipisicing culpa laborum amet enim amet sit. Officia in reprehenderit minim non aute consectetur quis occaecat exercitation officia Lorem et reprehenderit labore. Cupidatat reprehenderit ipsum exercitation Lorem consequat eu. Pariatur ullamco magna culpa labore eiusmod. Ullamco excepteur qui consequat deserunt nulla incididunt fugiat adipisicing occaecat.\r\n",
"registered": "2016-11-24T12:37:27 -09:00",
"latitude": 67.161816,
"longitude": 166.690978
},
{
"_id": "60646eed2617be2851744528",
"isActive": true,
"balance": "$2,149.30",
"picture": "http://placehold.it/32x32",
"age": 21,
"eyeColor": "green",
"name": "Wallace Pollard",
"gender": "male",
"company": "UNIWORLD",
"email": "wallacepollard@uniworld.com",
"phone": "+1 (985) 535-2869",
"address": "762 Hegeman Avenue, Faxon, Iowa, 8726",
"about": "Quis eu velit ipsum mollit dolor fugiat cillum consectetur proident sint anim ad. Do occaecat quis magna ut laboris commodo veniam sint amet ullamco. Officia eu occaecat ut esse esse anim non esse id proident aute duis veniam tempor. Cillum sint consequat culpa commodo enim nulla sunt excepteur mollit nisi do cupidatat. Aliqua est commodo mollit quis sunt sint officia. Irure anim anim et do. Ad minim reprehenderit incididunt proident pariatur officia.\r\n",
"registered": "2017-01-21T06:37:16 -09:00",
"latitude": -43.439215,
"longitude": -57.324881
},
{
"_id": "60646eede896f5bb2762dbac",
"isActive": false,
"balance": "$2,053.16",
"picture": "http://placehold.it/32x32",
"age": 34,
"eyeColor": "brown",
"name": "Jo Woodward",
"gender": "female",
"company": "IDEALIS",
"email": "jowoodward@idealis.com",
"phone": "+1 (870) 496-3687",
"address": "861 Nelson Street, Bellamy, Connecticut, 4473",
"about": "Minim ut est aliqua mollit adipisicing dolore elit. Pariatur amet Lorem magna eu incididunt reprehenderit in nostrud sint. Exercitation deserunt minim consequat culpa eu minim sunt consectetur nostrud. Ea eu incididunt enim do anim in ad.\r\n",
"registered": "2017-02-03T08:56:55 -09:00",
"latitude": -4.169375,
"longitude": 24.615448
},
{
"_id": "60646eed4ec8f2c73b81eab0",
"isActive": false,
"balance": "$2,035.09",
"picture": "http://placehold.it/32x32",
"age": 37,
"eyeColor": "brown",
"name": "Audra Pena",
"gender": "female",
"company": "QUANTALIA",
"email": "audrapena@quantalia.com",
"phone": "+1 (938) 498-3097",
"address": "123 Dare Court, Dennard, New York, 7500",
"about": "Est eiusmod amet reprehenderit eiusmod sit culpa nostrud voluptate fugiat. Deserunt laboris officia duis ea sint est ea ea mollit esse consequat voluptate ullamco. Pariatur et est officia culpa. Labore velit ut pariatur consectetur eu.\r\n",
"registered": "2016-02-13T06:58:45 -09:00",
"latitude": -69.218112,
"longitude": -44.1007
},
{
"_id": "60646eed7b30c225f1e4e141",
"isActive": true,
"balance": "$1,789.87",
"picture": "http://placehold.it/32x32",
"age": 23,
"eyeColor": "blue",
"name": "Kerr Barron",
"gender": "male",
"company": "FRENEX",
"email": "kerrbarron@frenex.com",
"phone": "+1 (900) 598-3114",
"address": "126 Garden Place, Ronco, Arkansas, 662",
"about": "Labore proident esse nostrud aute exercitation adipisicing labore dolore sit excepteur. Amet ipsum culpa occaecat velit elit enim ex amet. Do labore reprehenderit elit officia qui occaecat quis incididunt culpa. Ullamco deserunt ea et ipsum reprehenderit nostrud irure adipisicing pariatur pariatur laborum tempor voluptate. Pariatur minim adipisicing quis nostrud aute dolor voluptate labore officia. Sunt laboris aliquip sunt sit. Qui aute cillum pariatur velit aliqua sint aliqua occaecat sunt.\r\n",
"registered": "2016-06-15T11:52:15 -09:00",
"latitude": 83.957483,
"longitude": 117.855039
},
{
"_id": "60646eed9e04a1e3fd37b9f5",
"isActive": true,
"balance": "$1,239.48",
"picture": "http://placehold.it/32x32",
"age": 30,
"eyeColor": "green",
"name": "Morse Pearson",
"gender": "male",
"company": "POLARAX",
"email": "morsepearson@polarax.com",
"phone": "+1 (839) 460-2540",
"address": "594 Monroe Street, Whitewater, Florida, 3554",
"about": "Eiusmod officia sit amet enim adipisicing sit ad. Ad ullamco voluptate cillum ad ex Lorem sunt dolor amet ut velit ad duis in. Non sunt eiusmod occaecat excepteur irure ipsum. Nulla amet magna consectetur adipisicing ut do cillum dolore fugiat ea minim. Culpa nulla qui nisi magna sunt excepteur enim dolore deserunt ad.\r\n",
"registered": "2017-10-25T09:23:41 -09:00",
"latitude": -80.200915,
"longitude": -3.51258
},
{
"_id": "60646eed5c77ad254f087980",
"isActive": false,
"balance": "$1,433.94",
"picture": "http://placehold.it/32x32",
"age": 26,
"eyeColor": "green",
"name": "Olive Myers",
"gender": "female",
"company": "GYNK",
"email": "olivemyers@gynk.com",
"phone": "+1 (810) 591-3453",
"address": "668 Knight Court, Bedias, Maryland, 330",
"about": "Nisi sunt tempor irure aute ad reprehenderit ea tempor eiusmod. Cillum aliquip ullamco anim excepteur consequat irure anim minim qui anim irure aliquip. Exercitation laboris Lorem ut aliqua laborum est est voluptate esse. Ad duis esse labore amet dolor quis magna. Cillum pariatur dolor aute fugiat. Ea amet ad sunt elit pariatur. Est nisi anim duis irure pariatur deserunt.\r\n",
"registered": "2014-05-29T04:18:22 -09:00",
"latitude": -48.761037,
"longitude": -52.125989
},
{
"_id": "60646eed41a6be4e7e1f81a0",
"isActive": true,
"balance": "$2,658.63",
"picture": "http://placehold.it/32x32",
"age": 36,
"eyeColor": "blue",
"name": "Gina Contreras",
"gender": "female",
"company": "OPTYK",
"email": "ginacontreras@optyk.com",
"phone": "+1 (906) 594-3803",
"address": "542 Wolf Place, Gouglersville, Colorado, 3800",
"about": "Cupidatat elit elit est sit ex. Nulla ex fugiat aute mollit fugiat magna consequat eu. Ut elit voluptate ea ad do enim commodo laboris excepteur eiusmod reprehenderit eu proident.\r\n",
"registered": "2016-09-09T08:12:12 -09:00",
"latitude": 67.336542,
"longitude": -142.925281
},
{
"_id": "60646eed5de622105d564266",
"isActive": true,
"balance": "$2,950.10",
"picture": "http://placehold.it/32x32",
"age": 31,
"eyeColor": "blue",
"name": "Helena Coffey",
"gender": "female",
"company": "KEENGEN",
"email": "helenacoffey@keengen.com",
"phone": "+1 (897) 568-2022",
"address": "953 School Lane, Navarre, Wyoming, 2710",
"about": "Esse Lorem deserunt ipsum esse sunt mollit ullamco. Consectetur occaecat dolore labore ea sint id sit pariatur. Eiusmod labore cupidatat do anim do occaecat in quis sunt do quis fugiat. Non ex consequat adipisicing occaecat adipisicing aliquip enim deserunt laboris ipsum dolore eiusmod amet. Labore laborum proident minim reprehenderit excepteur et magna. Consequat velit ullamco tempor nulla mollit in aliqua ea excepteur pariatur fugiat excepteur ea sint. Ipsum eiusmod duis consequat reprehenderit aliquip proident do laborum Lorem officia deserunt mollit eiusmod.\r\n",
"registered": "2016-07-15T12:31:15 -09:00",
"latitude": -25.671953,
"longitude": -110.212733
},
{
"_id": "60646eed8a6f5c86ec09770e",
"isActive": false,
"balance": "$3,623.54",
"picture": "http://placehold.it/32x32",
"age": 20,
"eyeColor": "brown",
"name": "Margret White",
"gender": "female",
"company": "KRAGGLE",
"email": "margretwhite@kraggle.com",
"phone": "+1 (960) 539-3118",
"address": "506 Montgomery Street, Cutter, Nevada, 8222",
"about": "Labore est non commodo officia minim incididunt elit proident duis sunt est sunt. Elit et aliqua cupidatat qui et amet adipisicing anim consectetur ut id. Sit tempor consequat minim cupidatat velit dolore cupidatat esse. Fugiat culpa velit aute officia sit commodo Lorem non est culpa ullamco enim amet.\r\n",
"registered": "2015-06-09T08:23:11 -09:00",
"latitude": -18.423874,
"longitude": -160.983124
},
{
"_id": "60646eedd9d16abc563d4f93",
"isActive": true,
"balance": "$3,692.71",
"picture": "http://placehold.it/32x32",
"age": 28,
"eyeColor": "brown",
"name": "Carol Barrett",
"gender": "female",
"company": "FARMAGE",
"email": "carolbarrett@farmage.com",
"phone": "+1 (831) 416-2214",
"address": "649 Albany Avenue, Sparkill, Utah, 8456",
"about": "Exercitation adipisicing sit ea culpa. Mollit do sit officia cillum tempor. Proident ex in culpa dolore laborum fugiat labore in reprehenderit nostrud duis cillum id. Magna duis adipisicing eu sunt fugiat cillum consequat pariatur.\r\n",
"registered": "2019-02-11T09:31:13 -09:00",
"latitude": -78.829577,
"longitude": -168.991412
},
{
"_id": "60646eed06981d2971f2d3ea",
"isActive": false,
"balance": "$3,753.83",
"picture": "http://placehold.it/32x32",
"age": 24,
"eyeColor": "brown",
"name": "Santiago Mosley",
"gender": "male",
"company": "CORPORANA",
"email": "santiagomosley@corporana.com",
"phone": "+1 (832) 543-2299",
"address": "426 Meserole Avenue, Cassel, Alaska, 1673",
"about": "Deserunt quis enim ut elit do reprehenderit sint ut reprehenderit reprehenderit deserunt. Quis amet tempor aliquip eiusmod esse do ex adipisicing tempor ut eiusmod eu. Et ad minim culpa esse culpa nostrud reprehenderit qui culpa labore. Irure reprehenderit nulla qui consectetur ad esse nulla. Ut et esse Lorem Lorem amet incididunt excepteur mollit dolor do sit quis.\r\n",
"registered": "2020-07-09T11:06:25 -09:00",
"latitude": -42.919262,
"longitude": 171.678087
}
];
저자의 소스코드 모음집 링크이다.
https://github.com/seungwongo/javascript-basic
'Javascript > 자바스크립트 제대로 배워볼래?' 카테고리의 다른 글
| 자바스크립트 제대로 배우자 (0) | 2023.03.31 |
|---|---|
| 4-03.HTML 스타일 컨트롤 (0) | 2023.03.30 |
| 4-02.HTML 이벤트 컨트롤 (0) | 2023.03.30 |
| 4-01.HTML Element 컨트롤 (0) | 2023.03.30 |
| 3-17.정규식(RegExp) (0) | 2023.03.30 |