markdown HTML.CSS.JS.DynamicTablewJS.paginated表项目
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown HTML.CSS.JS.DynamicTablewJS.paginated表项目相关的知识，希望对你有一定的参考价值。
table {
width:100%;
border:1px solid;
border-collapse: collapse;
}
tr, th, td {
border:1px solid;
font-family:courier;
}
td {
text-align:center;
padding:10px;
}
fieldset {
padding:10px;
border-radius:10px;
}
label {
display:inline-block;
margin-bottom:10px;
}
#input:invalid {
background-color:pink;
}
#input:valid {
background-color:lightgreen;
}
#sub{
visibility:hidden;
}
var inicio=0;
var final=15;
function submitSearch() {
document.getElementById("sub").style.visibility="hidden";
var found=0;
var wordToSearch = document.getElementById("input").value;
if(wordToSearch==""){
console.log("entro en el alert");
alert("Please type somthing to search");
}
var table = document.getElementById("myTable");
for(var i=1;i<table.rows.length;i++){
var objCells = table.rows.item(i).cells;
var rowToCheck = table.rows[i].getElementsByTagName("td");
for(var j=0;j<rowToCheck.length;j++){
if(rowToCheck[j].innerHTML.toLowerCase()==wordToSearch.toLowerCase()){
console.log("entro en el for j")
rowToCheck[j].style.backgroundColor="lightgreen";
found++;
}
else{
rowToCheck[j].style.backgroundColor="white";
}
}
}
if(found!=0){
document.getElementById("sub").innerHTML=found+" matches found";
}
else{
document.getElementById("sub").innerHTML="no matches found";
}
document.getElementById("sub").style.visibility="visible";
console.log("number of matches: "+found)
}
var objectData={
cities:["Malaga","New York","Madrid","London","Paris","Fuengirola","Roma","Venecia","Honk Kong","Tokyo","Melbourne","Damasco","Bombay","Buenos Aires","San Francisco","Lima","Bogota","Manchester","Toulouse","Berlin"],
givenNames:["Michel","Marcos","Sandra","Rafael","Ketty","Victor","Ines","Sylvie","Alvaro","Roberto","Melissa","Carla","Emma","Julia","Valeria","Irene","Sonia","Eva","Lucas","Bruno"],
familyNames:["Aguirre","Duque","Duniol","Miñarro","Lopez","Garcia","Gomez","Fernandez","Skywalker"]
};
function createRandomTable(){
for(var i=0;i<500;i++){
var randomGivenName=objectData.givenNames[Math.round((Math.random()*19))];
var randomFamilyName=objectData.familyNames[Math.round((Math.random()*8))];
var randomAge=Math.round((Math.random()*120));
var randomCity=objectData.cities[Math.round((Math.random()*19))];
var table = document.querySelector("#myTable");
var row = table.insertRow();
row.innerHTML = "<td>"+i+"</td><td>"+randomGivenName+"</td><td>"+randomFamilyName+"</td><td>"+randomAge+"</td><td>"+randomCity+"</td>";
row.style.display="none";
}
}
function showSelectedRows(){
var rows = document.getElementById("myTable").rows;
for (var i = 0; i < rows.length-1; i++) {
if (i < inicio || i > final-1)
rows[i+1].style.display = 'none';
else
rows[i+1].style.display = '';
}
}
function previous(){
if(inicio!=0){
inicio-=15;
final-=15;
console.log(inicio);
console.log(final);
}
showSelectedRows();
}
function next(){
if(final<499){
inicio+=15;
final+=15;
console.log(inicio);
console.log(final);
}
showSelectedRows();
}
function init(){
createRandomTable();
showSelectedRows();
}
<body onload="init();">
<fieldset id="field">
<legend>SEARCH ENGINE</legend>
<center><div>
<label for="txt">Enter the key word: </label>
<input id="input" type="text" name="format" id="txt" value="" required>
<button onClick="submitSearch()" type="search" id="inputImg">Search</button>
<sub id="sub">no matches founded</sub>
</div>
</fieldset>
<table id="myTable">
<caption></caption>
<tr>
<th scope="col">ID</th>
<th scope="col">Given Name</th>
<th scope="col">Family Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</table>
<center><button onClick="previous();">Previous page</button>
<button onClick="next();">Next page</button>HTML.CSS.JS.DynamicTablewJS.paginated table project
---------------------------------------------------
A [Pen](https://codepen.io/Onlyforbopi/pen/YOmdBp) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).
[License](https://codepen.io/Onlyforbopi/pen/YOmdBp/license).以上是关于markdown HTML.CSS.JS.DynamicTablewJS.paginated表项目的主要内容，如果未能解决你的问题，请参考以下文章