카테고리 없음
[Jquery] HTML 테이블 내 항목 검색
Edward. K
2021. 11. 11. 10:36
반응형
알리 익스프레스 광군절이라고..어느분께서 엑셀 파일을 공유해주셨다.
거기에 어느분께서 html파일로 만드셨고..
난 거기에 검색기능만 추가했다. 상품 몇개만 남기고 샘플로..
사용한 library
> https://www.jqueryscript.net/table/Simple-jQuery-Plugin-For-Html-Table-Live-Search.html
<html>
<head>
<!-- https://www.jqueryscript.net/table/Simple-jQuery-Plugin-For-Html-Table-Live-Search.html#google_vignette -->
<meta http-equiv='Content-Type' content='text/html;' charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
/**
**options to have following keys:
**searchText: this should hold the value of search text
**searchPlaceHolder: this should hold the value of search input box placeholder
**/
(function($){
$.fn.tableSearch = function(options){
if(!$(this).is('table')){
return;
}
var tableObj = $(this),
searchText = (options.searchText)?options.searchText:'Search: ',
searchPlaceHolder = (options.searchPlaceHolder)?options.searchPlaceHolder:'',
divObj = $('<div style="float:left;">'+searchText+'</div><br /><br />'),
inputObj = $('<input type="text" width=500px placeholder="'+searchPlaceHolder+'" />'),
caseSensitive = (options.caseSensitive===true)?true:false,
searchFieldVal = '',
pattern = '';
inputObj.off('keyup').on('keyup', function(){
searchFieldVal = $(this).val();
pattern = (caseSensitive)?RegExp(searchFieldVal):RegExp(searchFieldVal, 'i');
tableObj.find('tbody tr').hide().each(function(){
var currentRow = $(this);
currentRow.find('td').each(function(){
if(pattern.test($(this).html())){
currentRow.show();
return false;
}
});
});
});
tableObj.before(divObj.append(inputObj));
return tableObj;
}
}(jQuery));
$(document).ready(function(){
$('table.search-table').tableSearch({
searchText:'검색어 입력',
searchPlaceHolder:'찾는 문자열'
});
});
</script>
</head>
<body link='#0563C1' vlink='#954F72' class='xl66'>
<table border=0 cellpadding=0 cellspacing=0 width=1000 style='border-collapse: collapse;table-layout:fixed;width:900pt' class="search-table">
<thead>
<tr height=0>
<td width=182 style='width:136pt'></td>
<td width=456 style='width:300pt'></td>
<td width=556 style='width:154pt'></td>
<td width=125 style='width:94pt'></td>
<td width=125 style='width:94pt'></td>
<td width=125 style='width:94pt'></td>
</tr>
</thead>
<tbody>
<tr height=44 style='mso-height-source:userset;height:33.0pt'>
<td height=44 class=xl65 width=182 style='height:33.0pt;width:136pt'>Category Name</td>
<td class=xl68 width=456 style='width:300pt'>Product Name</td>
<td class=xl65 width=246 style='width:154pt'>Product Image</td>
<td class=xl65 width=125 style='width:94pt'>OriginalPrice</td>
<td class=xl65 width=125 style='width:94pt'>SalePrice</td>
<td class=xl65 width=125 style='width:94pt'>Click url</td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Jewelry &amp; Accessories</td>
<td class=xl69 width=456 style='width:300pt'>Men Bracelets Vintage Multilayer
Leather Braid Bracelets Bangles Star Leaf Owl Handmade Rope Wrap Bracelets
Male Gift Jewlery</td>
<td ><a
href='https://ae04.alicdn.com/kf/HTB1HVO0XW1s3KVjSZFtq6yLOpXaf.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/HTB1HVO0XW1s3KVjSZFtq6yLOpXaf.jpg' width='154' /></a></td>
<td class=xl66>USD 2.19</td>
<td class=xl66>USD 0.01</td>
<td ><a href='https://s.click.aliexpress.com/e/_ALSOhN'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Jewelry &amp; Accessories</td>
<td class=xl69 width=456 style='width:300pt'>ROXI Small Crown Moon Star
Lightning Constellation Stud Earrings for Women 925 Sterling Silver
Piercing&nbsp;Earring Kolczyki Damskie</td>
<td ><a
href='https://ae04.alicdn.com/kf/H322fbe36e38a43d98c50e074b025c6e3c.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/H322fbe36e38a43d98c50e074b025c6e3c.jpg' width='154' /></a></td>
<td class=xl66>USD 6.65</td>
<td class=xl66>USD 0.01</td>
<td ><a href='https://s.click.aliexpress.com/e/_At9KCF'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Lights &amp; Lighting</td>
<td class=xl69 width=456 style='width:300pt'>Led Strip Lights RGB 5050 2835
Waterproof 5M-30M Wifi Phone Control Led Flexible Ribbon Tape for TV
Backlight Room Home Party</td>
<td ><a
href='https://ae04.alicdn.com/kf/H81bfb7c876c14e8f8f1981d61494fd4fs.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/H81bfb7c876c14e8f8f1981d61494fd4fs.jpg' width='154' /></a></td>
<td class=xl66>USD 8.23</td>
<td class=xl66>USD 0.27</td>
<td ><a href='https://s.click.aliexpress.com/e/_ABt4jp'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Lights &amp; Lighting</td>
<td class=xl69 width=456 style='width:300pt'>Powerful LED Flashlight Portable
XHP70.2 Torch USB Rechargeable Searchlight Waterproof Spotlight with Base
Fishing Light Lantern</td>
<td ><a
href='https://ae04.alicdn.com/kf/H09d98d1b68da4669ac19bf8f20f23e48x.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/H09d98d1b68da4669ac19bf8f20f23e48x.jpg' width='154' /></a></td>
<td class=xl66>USD 46.65</td>
<td class=xl66>USD 27.99</td>
<td ><a href='https://s.click.aliexpress.com/e/_A95vur'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Security &amp; Protection</td>
<td class=xl69 width=456 style='width:300pt'>Hiseeu H.265 8CH 5MP 3MP POE
Security Surveillance Camera System Kit AI Face Detection Audio Record IP
Camera CCTV Video NVR Set</td>
<td ><a
href='https://ae04.alicdn.com/kf/Hf10ca2b8370f4b6ebc9c2250bcc59ba5j.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/Hf10ca2b8370f4b6ebc9c2250bcc59ba5j.jpg' width='154' /></a></td>
<td class=xl66>USD 309.00</td>
<td class=xl66>USD 179.22</td>
<td ><a href='https://s.click.aliexpress.com/e/_9Q7gob'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Security &amp; Protection</td>
<td class=xl69 width=456 style='width:300pt'>Techage Security Camera System
8CH 5MP HD POE NVR Kit CCTV Two Way Audio AI Face Detect Outdoor Video
Surveillance IP Camera Set</td>
<td ><a
href='https://ae04.alicdn.com/kf/H80b59555d4f24eba846d13ca562bee2fR.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/H80b59555d4f24eba846d13ca562bee2fR.jpg' width='154' /></a></td>
<td class=xl66>USD 359.78</td>
<td class=xl66>USD 165.50</td>
<td ><a href='https://s.click.aliexpress.com/e/_99OEhd'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Tools</td>
<td class=xl69 width=456 style='width:300pt'>Cloudray China CO2 ZnSe Focus
Lens Dia.18 19.05 20 mm FL38.1 50.8 63.5 101.6 127mm 1.5 - 4&quot; for Laser
Engraving Cutting Machine</td>
<td ><a
href='https://ae04.alicdn.com/kf/Ha7016fc9d36e4b1793ce6a22ebdbecbfS.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/Ha7016fc9d36e4b1793ce6a22ebdbecbfS.jpg' width='154' /></a></td>
<td class=xl66>USD 10.00</td>
<td class=xl66>USD 7.50</td>
<td ><a href='https://s.click.aliexpress.com/e/_A88qz9'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Tools</td>
<td class=xl69 width=456 style='width:300pt'>25V Impact Electric Battery
Cordless Hand Electric Drill Three Funct Screwdriver Home Diy Power Tools
Home Decoration &amp; Drilling</td>
<td ><a
href='https://ae04.alicdn.com/kf/He19313ec636a446bb3db13ec45ac8669e.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/He19313ec636a446bb3db13ec45ac8669e.jpg' width='154' /></a></td>
<td class=xl66>USD 99.40</td>
<td class=xl66>USD 43.74</td>
<td ><a href='https://s.click.aliexpress.com/e/_A3r6bh'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Tools</td>
<td class=xl69 width=456 style='width:300pt'>UNI-T UNI T Digital Multimeter
True RMS UT890C UT890D+ Manual Range AC DC Frequency Capacitance Temperature
Tester Backlight</td>
<td ><a
href='https://ae04.alicdn.com/kf/HTB1l6MSda5s3KVjSZFNq6AD3FXaa.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/HTB1l6MSda5s3KVjSZFNq6AD3FXaa.jpg' width='154' /></a></td>
<td class=xl66>USD 32.13</td>
<td class=xl66>USD 26.99</td>
<td ><a href='https://s.click.aliexpress.com/e/_9RLvHt'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Watches</td>
<td class=xl69 width=456 style='width:300pt'>6 Fashion colors CHENXI CX021B
Brand relogio Luxury Women's Casual watches waterproof watch women fashion
Dress Rhinestone watch</td>
<td ><a
href='https://ae04.alicdn.com/kf/H6b17ca65eb864f4fb2a7e0f4d3e49b6er.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/H6b17ca65eb864f4fb2a7e0f4d3e49b6er.jpg' width='154' /></a></td>
<td class=xl66>USD 21.02</td>
<td class=xl66>USD 8.62</td>
<td ><a href='https://s.click.aliexpress.com/e/_ALBi0x'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Women's Clothing</td>
<td class=xl69 width=456 style='width:300pt'>InstaHot Elegant Women Dress
Stand Collar Slim Waist Solid Blue Ankle Length Autumn Long Sleeve Casual
Party Dress 2020 Fashion</td>
<td ><a
href='https://ae04.alicdn.com/kf/H3daa81e8a294418e9e8b53114c1c4046m.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/H3daa81e8a294418e9e8b53114c1c4046m.jpg' width='154' /></a></td>
<td class=xl66>USD 30.34</td>
<td class=xl66>USD 16.69</td>
<td ><a href='https://s.click.aliexpress.com/e/_9hImX1'
target='_blank'>Go to Click</a></td>
</tr>
<tr height=200 style='mso-height-source:userset;height:150.0pt'>
<td height=200 class=xl66 style='height:150.0pt'>Women's Clothing</td>
<td class=xl69 width=456 style='width:300pt'>One Shoulder Padded Sexy Satin
Maxi Dress Women's Evening Party Dress Gown with Ribbon Royal Blue Green
Draped Long Dress</td>
<td ><a
href='https://ae04.alicdn.com/kf/H78deaba2d300496d8338ea036a78ba0bM.jpg'
target='_blank'><img src='https://ae04.alicdn.com/kf/H78deaba2d300496d8338ea036a78ba0bM.jpg' width='154' /></a></td>
<td class=xl66>USD 72.39</td>
<td class=xl66>USD 48.50</td>
<td ><a href='https://s.click.aliexpress.com/e/_AbPL67'
target='_blank'>Go to Click</a></td>
</tr>
</tbody>
</table>
</body>
</html>
반응형