markdown HTML.CSS.JS.DynamicTablewJS.v5
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown HTML.CSS.JS.DynamicTablewJS.v5相关的知识，希望对你有一定的参考价值。
.td-match{
color:#ff9999;
}
table {
width:90%;
table-layout:fixed;
margin:5px;
}
th, td{
padding: 5px;
text-align:left;
border-bottom: 1px solid #ddd;
}
th{
background-color:#99c2ff;
color:#001f4d;
}
tr:hover td
{background-color: #e6f0ff;}
caption{
text-align:center;
font-size:1.2em;
background-color:#4d94ff;
color:white;
padding:2px;
border:1px solid black;
}
label{
margin:5px;
}
#nbRecords, #nbPerPage{
width:60px;
}
input{
height:20px;
margin:5px;
}
.btNavigation{
background-color:#99c2ff;
color:#001f4d;
height:2em;
padding:2px, 5px;
margin:10px;
border:1px solid black;
border-radius:5px;
font-weight:bold;
width:10em;
}
button:disabled {
opacity: 0.6;
}let dbList, lastShownRecord={}, myHeadRow, limit, myRows;
let fName=['Aaron','Adam','Adnan','Alan','Aleksandr','Alex','André','Andrew','Andy','Anthony','Antony','Arjen','Arturo','Ashley','Balázs','Barry','Ben','Billy','Boaz','Bobby','Bojan','Brad','Bradley','Brendan','Brian','Caleb','Calum','Calvin','Cameron','Carl','Carlos','Carlton','Cesc','Chris','Clark','Clayton','Clinton','Cole','Colin','Collins','Craig','Cristiano','Curtis','Dale','Damien','Dan','Danny','Darren','Darryl','Dave','David','Dean','Derek','Dickson','Didier','Dimitris','Djibril','Donovan','Eddie','El Hadji','Emanuel','Emmanuel','Emmet','Emre','Eric','Eugen','Florent','Fraser','Frazer','Gábor','Gabriel','Gaël','Gareth','Gary','Gavin','Gerard','Giuseppe','Glen','Glenn','González','Greg','Henoch','Iain','Ian','Isaac','Jabo','Jack','Jake','James','Jamie','Jaroslav','Jason','Jay','Jemal','Jermaine','Jerome','Ji-Sung','Jlloyd','Jobi','Joe','Joey','Johan','John','Jon','Jonathan','José','José Antonio','Juan-Carlos','Julián','Junior','Jürgen','Jussi','Justin','Kayode','Keigan','Keith','Kelly','Kelvin','Kenny','Kevin','Kieran','Kris','Lars','Lassana','Lee','Lenny','Leon','Lewis','Liam','Lionel','Lloyd','Luke','Marc','Marcin','Marcus','Mark','Martin','Marvin','Massimo','Mat','Mathieu','Matt','Matthew','Matty','Michael','Mikael','Mike','Milan','Miran','Mohamed','Morten','Nat','Nathan','Nedum','Neil','Nicky','Nils Eric','Njazi','Ólafur','Ollie','Omar','Osei','Pablo','Patrik','Paul','Pawel','Pepe','Peter','Petr','Phil','Philippe','Quincy','Ricardo','Richard','Ricky','Rob','Robbie','Robert','Robin','Ross','Rowan','Ryan','Sam','Sándor','Saul','Scott','Sean','Sebastian','Shane','Shaun','Shola','Simon','Steed','Stephan','Stephen','Steve','Steven','Stewart','Stuart','Sylvan','Tal','Terrell','Tim','Tom','Tony','Tyrone','Wayne','Wes','Will','Willo','Zak','Zeshan'];
let lName=['ABBOTT','AHMED','AMEOBI','ANDERSEN','ANDREW','ATKINSON','AUSTIN','BARNETT','BAROŠ','BARRY','BELÖZOGLU','BEN HAIM','BENT','BLINKHORN','BOPP','BORBELY','BOUCAUD','BRITTAIN','BROWN','BRUCE','BURGIC','CAHILL','CAINES','CECH','CISSÉ','CLANCY','CLARKE','CLICHY','COLE','COLIN','COMMONS','CONOMBO','COOPER','DALEY','DAVIES','DAVIS','DEENEY','DELANEY','DIARRA','DIOUF','DJEMBA-DJEMBA','DJORDJIC','DJOUROU','DOUGHTY','DOUGLAS','DOWNING','DOYLE','DROBNÝ','DROGBA','EBANKS-BLAKE','EBOUÉ','EDWARDS','EL-ABD','ELLIOTT','ETUHU','FÀBREGAS','FLAMINI','FLINDERS','FLOOD','FOLAN','FORBES','FORSSELL','FORTUNE','FRIARS','GERKEN','GERRBRAND','GLEESON','GRANT','GUY','HALFORD','HASSELL','HIBBERT','HIRSCHFELD','HLEB','HOBBS','HOWARD','HOYTE','HUGHES','HUTCHINSON','HUTH','IBEHRE','JÄÄSKELÄINEN','JEROME','JOHANSSON','JOHN','JOHNSON','JONES','JOSEMI','KAY','KAZIM RICHARDS','KEANE','KELTIE','KENNEDY','KEOGH','KIRÀLY','KLÉBERSON','KNIGHTS','KONSTANTOPOULOS','KUQI','LARSSON','LEDLEY','LLOYD','LUPOLI','MACCARONE','MAHER','MALBRANQUE','MANGAN','MCANUFF','MCDONAGH','MCEVELEY','MCFAUL','MCGILL','MCLACHLAN','MCMAHON','MCPHEE','MEARS','MEDJANI','MESSI','MILLS','MOORE','MORRISON','MYHILL','NARDIELLO','NEYMAR','NIVEN','NOBLE','NOLAN','CONNOR','ODEJAYI','ONUOHA','OSBOURNE','OWUSU ABEYIE','ÖZKAN','PARK','PARKER','PARKIN','PEDERSEN','PENNANT','PETERS','PIDGELEY','PIQUÉ','POGATETZ','PRICE','RAPONI','RAVENHILL','REHMAN','REID','REINA','REYES','RICHARDS','RICHARDSON','RICKETTS','RIDGEWELL','ROBBEN','ROBERTS','ROBINSON','ROCHE','RONALDO','ROONEY','ROSSI','RYAN','SADLER','SAM','SAMUEL','SANKOFA','SCHUMACHER','SENDEROS','SHEEHAN','SIEDLARZ','SISSOKO','SKÚLASON','SKUSE','SOMNER','SPERONI','TALBOT','TAYLOR','TERRY','THOMAS','TOGWELL','TONGE','TORGHELLE','TUDGAY','TURNBULL','TURNER','VAN PERSIE','VAZ TÉ','VINE','WARNOCK','WESTLAKE','WHITBREAD','WHITTINGHAM','WILES','WILLIAMS','WILLOCK','WILSON','WOODMAN','WRIGHT-PHILLIPS','WROE','YOUGA'];
var club=['Arsenal','Aston Villa','Barnsley','Birmingham City','Blackburn Rovers','Blackpool','Bolton Wanderers','Boston United','AFC Bournemouth','Bradford City','Brentford','Brighton and Hove Albion','Bristol City','Bristol Rovers','Burnley','Bury','Cambridge United','Cardiff City','Carlisle United','Charlton Athletic','Chelsea','Cheltenham Town','Chesterfield','Colchester United','Coventry City','Crewe Alexandra','Crystal Palace','Darlington','Derby County','Doncaster Rovers','Everton','Fulham','Gillingham','Grimsby Town','Hartlepool United','Huddersfield Town','Hull City','Ipswich Town','Kidderminster Harriers','Leeds United','Leicester City','Leyton Orient','Lincoln City','Liverpool','Luton Town','Macclesfield Town','Manchester City','Mansfield Town','Manchester United','Middlesbrough','Millwall','Newcastle United','Northampton Town','Norwich City','Nottingham Forest','Notts County','Oldham Athletic','Oxford United','Peterborough United','Plymouth Argyle','Preston North End','Portsmouth','Port Vale','Queens Park Rangers','Reading','Rochdale','Rotherham United','Rushden & Diamonds','Scunthorpe United','Sheffield United','Sheffield Wednesday','Southampton','Southend United','Stockport County','Stoke City','Sunderland','Swansea City','Swindon Town','Torquay United','Tottenham Hotspur','Tranmere Rovers','Walsall','Watford','West Bromwich Albion','West Ham United','Wigan Athletic','Milton Keynes Dons','Wolverhampton Wanderers','Wrexham','Wycombe Wanderers','Yeovil Town','York City','UC AlbinoLeffe','US Arezzo','Ascoli Picchio','Atalanta BC','FC Bari 1908','Bologna FC','Brescia Calcio','Cagliari','Catania Calcio','US Catanzaro','AC Cesena','Chievo Verona','FC Crotone','Empoli','ACF Fiorentina','Genoa CFC','Internazionale','Juventus','SS Lazio','US Lecce','AS Livorno','ACR Messina','AC Milan','Modena','US Palermo','Parma','AC Perugia','Pescara Calcio','Piacenza Calcio','US Reggina','AS Roma','US Salernitana','Sampdoria','Robur Siena','Ternana Calcio','Torino','FC Treviso','Unione Triestina','Udinese Calcio','Venezia FC','Hellas Verona','Vicenza Calcio','Deportivo Alavés','Albacete Balompié','UD Almería','Athletic Club','Atlético Madrid','Barcelona','Celta Vigo','Granada CF','Cádiz CF','Córdoba CF','RC Deportivo','SD Eibar','Elche CF','RCD Espanyol','Getafe CF','Gimnàstic Tarragona','Levante UD','Lleida Esportiu','RCD Mallorca','Málaga CF','Atlético Malagueño','CD Numancia','CA Osasuna','Polideportivo Ejido','Pontevedra CF','Racing Ferrol','Real Racing Club','Real Betis','Real Madrid','Real Murcia','Real Sociedad','RC Recreativo','Salamanca AC','Sevilla','Real Sporting','CD Tenerife','Terrassa FC','Valencia CF','Real Valladolid','Villarreal CF','Xerez','Real Zaragoza','ADO Den Haag','AGOVV Apeldoorn','AZ Alkmaar','Ajax','SC Cambuur','FC Eindhoven','FC Emmen','SBV Excelsior','FC Den Bosch','FC Dordrecht','FC Groningen','FC Twente','FC Utrecht','FC Volendam','PEC Zwolle','Feyenoord','Fortuna Sittard','Go Ahead Eagles','HFC Haarlem','Helmond Sport','Heracles Almelo','MVV Maastricht','NAC Breda','NEC Nijmegen','PSV', 'RBC Roosendaal','RKC Waalwijk','Roda JC Kerkrade','SC Heerenveen','Sparta Rotterdam','FC Oss','Telstar','Vitesse'];
window.onload=function init(){
document.querySelector('#btnCreate').addEventListener('click', createUser);
document.querySelector('#nbPerPage').addEventListener('change', displayPerPage);
document.querySelector('#search').addEventListener('keyup', search);
createNavigationButtons();
dbList=new Records();
dbSearch=new Records();
}
class User{
constructor(f, l, c){
this.firstName=f;
this.lastName=l,
this.club=c;
}
}
class Records{
constructor(){
this.records=[];
}
add(u){
this.records.push(u);
}
clear(){
this.records=[];
}
search(what){
this.records.forEach(function (a,b,c){
if(a.firstName.toUpperCase().indexOf(what.toUpperCase())>=0 || a.lastName.toUpperCase().indexOf(what.toUpperCase())>=0 || a.club.toUpperCase().indexOf(what.toUpperCase())>=0){
dbSearch.add(new User(a.firstName, a.lastName,a.club));
}
});
}
list(){
let a=document.querySelector('#divTable');
let exists=document.querySelector('#myTable');
if(Boolean(exists)){
a.removeChild(exists);
}
let myTable=document.createElement('table');
a.append(myTable);
myTable.id='myTable';
myTable.class='tablesorter';
let myCaption=myTable.createCaption();
myCaption.innerHTML='The best soccer players in Europe';
let myHead=myTable.createTHead();
myHeadRow=myHead.insertRow();
myHeadRow.innerHTML=('<th>First Name</th><th>Last Name</th><th>Current Club</th>');
let myBody=myTable.createTBody();
this.records.forEach(function (a,b,c){
let myRow=myBody.insertRow();
let myData1=myRow.insertCell();
let myData2=myRow.insertCell();
let myData3=myRow.insertCell();
let searchQuery=document.querySelector('#search').value;
let searchLen=searchQuery.length;
if(searchLen>0){
//first Name
let iFN=a.firstName.toUpperCase().indexOf(searchQuery.toUpperCase());
if(iFN>=0){
myData1.innerHTML=(a.firstName.substr(0,iFN) + '<span class="td-match">' + a.firstName.substr(iFN,searchLen) + '</span>' + a.firstName.slice(iFN+searchLen));
}
else{
myData1.innerHTML=(a.firstName);
}
//last Name
let iLN=a.lastName.toUpperCase().indexOf(searchQuery.toUpperCase());
if(iLN>=0){
myData2.innerHTML=(a.lastName.substr(0,iLN) + '<span class="td-match">' + a.lastName.substr(iLN,searchLen) + '</span>' + a.lastName.slice(iLN+searchLen));
}
else{
myData2.innerHTML=(a.lastName);
}
//club
let iC=a.club.toUpperCase().indexOf(searchQuery.toUpperCase());
if(iC>=0){
myData3.innerHTML=(a.club.substr(0,iC) + '<span class="td-match">' + a.club.substr(iC,searchLen) + '</span>' + a.club.slice(iC+searchLen));
}
else{
myData3.innerHTML=(a.club);
}
}
else{
myData1.innerHTML=(a.firstName);
myData2.innerHTML=(a.lastName);
myData3.innerHTML=(a.club);
}
myRow.style.display='none';
});
myRows=myTable.rows;
limit=parseInt(document.querySelector('#nbPerPage').value);
lastShownRecord.start=0;
lastShownRecord.end=limit;
showTableRows(0,limit);
document.querySelector('#btPrev').style.display='inline';
document.querySelector('#btNext').style.display='inline';
}
}
function createUser(){
dbList.clear();
dbSearch.clear();
let n=document.querySelector('#nbRecords').value;
for(let i=1;i<=n; i++){
let f=fName[Math.round(((fName.length - 1) * Math.random()) + 0)];
let l=lName[Math.round(((lName.length - 1) * Math.random()) + 0)];
let c=club[Math.round(((club.length - 1) * Math.random()) + 0)];
dbList.add(new User(f,l,c));
}
//display list
dbList.list();
}
function showTableRows(start,end){
//clear previous records from table
if(lastShownRecord.end>myRows.length-1){lastShownRecord.end=myRows.length-1};
for(let i=lastShownRecord.start;i<=lastShownRecord.end;i++){
myRows[i].style.display = "none" ;
}
//populate table
myHeadRow.style.display='table-row';
if(end > myRows.length-1){end=myRows.length-1};
for(let i=start;i<=end;i++){
myRows[i].style.display = "table-row" ;
}
lastShownRecord={start:start,end:end};
//buttons enable/disable
if(lastShownRecord.start<=1){
document.querySelector('#btPrev').disabled=true;
}
else{
document.querySelector('#btPrev').disabled=false;
}
if(lastShownRecord.end ===(myRows.length)-1 ){
document.querySelector('#btNext').disabled=true;
}
else{
document.querySelector('#btNext').disabled=false;
}
//console.log('tot rows: ' + myRows.length + ' lastShownRecord.start: ' + lastShownRecord.start + ' lastShownRecord.end: ' + lastShownRecord.end);
}
function createNavigationButtons(){
let btPrev=document.createElement('button');
btPrev.id='btPrev';
btPrev.setAttribute('class','btNavigation');
btPrev.addEventListener('click', goPrevious);
let txtBtPrev=document.createTextNode('Previous');
btPrev.append(txtBtPrev);
document.body.append(btPrev);
btPrev.style.display='none';
let btNext=document.createElement('button');
btNext.id='btNext';
btNext.setAttribute('class','btNavigation'); //btNext.class=.. does not work???
btNext.addEventListener('click', goNext);
let txtBtNext=document.createTextNode('Next');
btNext.append(txtBtNext);
document.body.append(btNext);
btNext.style.display='none';
}
function displayPerPage(){
if(document.querySelector('#search').value.length==0){
dbList.list();
}
else{
dbSearch.list();
}
}
function goPrevious(){
showTableRows(lastShownRecord.start-limit,lastShownRecord.start-1);
}
function goNext(){
showTableRows(lastShownRecord.end+1,lastShownRecord.end+limit);
}
function search(e){
if(e.target.value.length==0){
dbList.list();
document.querySelector('#searchComments').innerHTML='';
}
else{
dbSearch.clear();
dbList.search(e.target.value);
dbSearch.list();
document.querySelector('#searchComments').innerHTML='records found: ' + dbSearch.records.length;
}
}<html>
<header>
</header>
<body>
<div>
<label for='nbRecords'> Number of records to create</label>
<input id='nbRecords' type=number value=1000>
<button id='btnCreate'> Create</button>
<br>
<label for='nbPerPage'> Display per page</label>
<input id='nbPerPage' type=number value=15 min=1>
<br>
<label for='search' style='float:left'> Search all fields</label>
<input id='search' type=text style='float:left '>
<div id='searchComments' style='float:left; margin-left:5px'></div>
</div>
<div id='divTable'>
</div>
</body>
</html>HTML.CSS.JS.DynamicTablewJS.v5
------------------------------
A [Pen](https://codepen.io/Onlyforbopi/pen/jvgXJe) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).
[License](https://codepen.io/Onlyforbopi/pen/jvgXJe/license).以上是关于markdown HTML.CSS.JS.DynamicTablewJS.v5的主要内容，如果未能解决你的问题，请参考以下文章