Code mẫu tìm tên file trong bảng HTML
//////Code mẫu tìm tên file trong bảng div ul
<script>
function quicksearch() {
// Declare variables
var input, filter, ul, li, i, txtValue;
input = document.getElementById(“formquicksearch”);
filter = input.value.toUpperCase();
ul = document.getElementById(“formsearch”);
li = ul.getElementsByTagName(“li”);// Loop through all list items, and hide those that don’t match the search query
for (i = 0; i < li.length; i++) {
txtValue = li[i].textContent || li[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = “”;
} else {
li[i].style.display = “none”;
}
}
}
</script><div class=”mdui-row”>
<input type=”text” id=”formquicksearch” onkeyup=”quicksearch()” placeholder=”Tìm nhanh trong trang..”>
<ul class=”mdui-list” id=”formsearch”>
<li class=”mdui-list-item th”>
<div class=”mdui-col-xs-12 mdui-col-sm-7″><!–constStr@File–> <i class=”mdui-icon material-icons icon-sort” data-sort=”name” data-order=”downward”>expand_more</i></div>
<div class=”mdui-col-sm-3 mdui-text-right”><!–constStr@EditTime–> <i class=”mdui-icon material-icons icon-sort” data-sort=”date” data-order=”downward”>expand_more</i></div>
<div class=”mdui-col-sm-2 mdui-text-right”><!–constStr@Size–> <i class=”mdui-icon material-icons icon-sort” data-sort=”size” data-order=”downward”>expand_more</i></div>
</li>
<!–FolderListStart–>
<li class=”mdui-list-item mdui-ripple”>
<a href=”<!–FileEncodeReplaceUrl–>/”>
<div class=”mdui-col-xs-12 mdui-col-sm-7 mdui-text-truncate”>
<i class=”mdui-icon material-icons”>folder_open</i>
<span><!–FileEncodeReplaceName–></span>
</div>
<div class=”mdui-col-sm-3 mdui-text-right”><!–lastModifiedDateTime–></div>
<div class=”mdui-col-sm-2 mdui-text-right”><!–size–></div>
</a>
</li>
<!–FolderListEnd–>
<!–FileListStart–>
<li class=”mdui-list-item file mdui-ripple”>
<a href=”<!–FileEncodeReplaceUrl–>?preview” target=”_blank”>
<div class=”mdui-col-xs-12 mdui-col-sm-7 mdui-text-truncate”>
<i class=”mdui-icon material-icons”><!–IconValue–></i>
<span><!–FileEncodeReplaceName–></span>
</div>
<div class=”mdui-col-sm-3 mdui-text-right”><!–lastModifiedDateTime–></div>
<div class=”mdui-col-sm-2 mdui-text-right”><!–size–></div>
</a>
</li>
<!–FileListEnd–><!–MorePageStart–>
<form action=”” method=”POST” id=”nextpageform”>
<input type=”hidden” id=”pagenum” name=”pagenum” value=””>
<li class=”mdui-list-item th”>
<div class=”mdui-col-sm-6 mdui-left mdui-text-left”>
<!–PrePageStart–>
<a onclick=”nextpage(<!–PrePageNum–>);” class=”mdui-btn mdui-btn-raised”><!–constStr@PrePage–></a>
<!–PrePageEnd–>
<!–NextPageStart–>
<a onclick=”nextpage(<!–NextPageNum–>);” class=”mdui-btn mdui-btn-raised”><!–constStr@NextPage–></a>
<!–NextPageEnd–>
</div>
<div class=”mdui-col-sm-6 mdui-right mdui-text-right”>
<div class=”mdui-right mdui-text-right”><span class=”mdui-chip-title”>Page: <!–MorePageListStart–><!–MorePageListEnd–><!–MorePageListNowStart–><!–PageNum–><!–MorePageListNowEnd–>/<!–MaxPageNum–></span></div>
</div>
</li>
</form>
<!–MorePageEnd–>
</ul>
</div>
//////Code mẫu tìm tên file trong bảng table tr td
<style>
#formquicksearch {
margin: 5px 5px 0px 5px;
width: 100%; /* Full-width */
font-size: large; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}#formsearch {
margin: 5px 5px 0px 5px;
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: large; /* Increase font-size */
}#formsearch th, #formsearch td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
a:link, a:visited {
color: #6c1515;
text-decoration: none;
display: inline-block;
}#formsearch tr {
border-bottom: 1px solid #ddd;
}#formsearch tr.header, #formsearch tr:hover {
background-color: #f1f1f1;
}</style>
<script>
function quicksearch() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById(“formquicksearch”);
filter = input.value.toUpperCase();table = document.getElementById(“formsearch”);
tr = table.getElementsByTagName(“tr”);// Loop through all table rows, and hide those who dont match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName(“td”)[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = “”;
} else {
tr[i].style.display = “none”;
}
}
}
}
</script>
<input type=”text” id=”formquicksearch” onkeyup=”quicksearch()” placeholder=”Tìm nhanh..”>
<table id=”formsearch”>
………..
</table>
