I have a table on a page and I need to search within it i.e., like a filter….when i type within the search it should filter the results from the table
Need JavaScript code for the same as not an expert.
enter code here https://jsfiddle.net/jgdqbxhn/
JavaScript
x
21
21
1
function myFunction() {2
// Declare variables3
var input, filter, table, tr, td, i, txtValue;4
input = document.getElementById("myInput");5
filter = input.value.toUpperCase();6
table = document.getElementById("myTable");7
tr = table.getElementsByTagName("tr");8
9
// Loop through all table rows, and hide those who don't match the search query10
for (i = 0; i < tr.length; i++) {11
td = tr[i].getElementsByTagName("td")[0];12
if (td) {13
txtValue = td.textContent || td.innerText;14
if (txtValue.toUpperCase().indexOf(filter) > -1) {15
tr[i].style.display = "";16
} else {17
tr[i].style.display = "none";18
}19
}20
}21
}JavaScript
1
10
10
1
#myInput {2
background-image: url("/css/searchicon.png"); /* Add a search icon to input */3
background-position: 10px 12px; /* Position the search icon */4
background-repeat: no-repeat; /* Do not repeat the icon image */5
width: 100%; /* Full-width */6
font-size: 16px; /* Increase font-size */7
padding: 12px 20px 12px 40px; /* Add some padding */8
border: 1px solid #ddd; /* Add a grey border */9
margin-bottom: 12px; /* Add some space below the input */10
}JavaScript
1
438
438
1
<p>2
<input3
id="myInput"4
onkeyup="myFunction()"5
placeholder="Search for videos.."6
type="text"7
/>8
</p>9
10
<table id="myTable"></table>11
12
<table style="width: 100%; table-layout: fixed">13
<tbody>14
<tr>15
<td16
class="mt-bgcolor-dddddd"17
rowspan="5"18
style="vertical-align: top"19
>20
<br />21
<a22
href="/Archive/eLearning_Library"23
title="eLearning Library"24
><img25
alt=""26
class="internal default"27
height="33px"28
src="/@api/deki/files/16797/goBack.png"29
style="width: 112px; height: 33px"30
width="112px"31
/></a>32
33
<p class="mt-align-center"> </p>34
35
<p class="mt-align-center">36
<span class="mt-font-arial"37
><strong38
><img39
alt=""40
class="internal default"41
src="/@api/deki/files/16823/hot-png-46885.png" /></strong42
></span>43
</p>44
45
<p class="mt-align-center"> </p>46
</td>47
<td48
class="mt-bgcolor-ecf0f1"49
colspan="4"50
rowspan="1"51
style="vertical-align: top"52
>53
<img54
alt=""55
class="internal default"56
height="63px"57
src="/@api/deki/files/16820/eyes.jpg"58
style="width: 979px; height: 63px"59
width="979px"60
/>61
</td>62
</tr>63
<tr>64
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">65
<dl>66
<dt class="mt-align-center">67
<strong68
><a69
class="F1"70
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"71
title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"72
><img73
alt=""74
class="internal default"75
height="51.9922px"76
src="/@api/deki/files/16778/Real_Time_Staging_-_November_2021.png"77
style="width: 97.9948px; height: 51.9922px"78
width="97.9948px" /></a79
></strong>80
</dt>81
</dl>82
83
<p class="mt-align-center">84
<span class="mt-font-size-14"85
><span class="mt-font-arial"86
><strong87
><strong88
><a89
class="F1"90
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"91
title="Real Time Staging"92
>REAL TIME STAGING - NOVEMBER 2021</a93
> </strong94
></strong95
></span96
></span97
>98
</p>99
</td>100
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">101
<dl>102
<dt class="mt-align-center">103
<strong104
><a105
class="F1"106
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"107
title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"108
><img109
alt=""110
class="internal default"111
height="51.9922px"112
src="/@api/deki/files/16778/Real_Time_Staging_-_November_2021.png"113
style="width: 97.9948px; height: 51.9922px"114
width="97.9948px" /></a115
> </strong116
>117
</dt>118
</dl>119
120
<p class="mt-align-center">121
<span class="mt-font-arial"122
><span class="mt-font-size-14"123
><strong124
><strong125
> <a126
href="/@api/deki/files/16781/Real_Time_Staging_-_Presentation_Material.pdf"127
target="_blank"128
title="https://documentationcenter.com/@api/deki/files/16781/Real_Time_Staging_-_Presentation_Material.pdf?origin=mt-web"129
>REAL TIME STAGING -130
PRESENTATION </a131
></strong132
></strong133
></span134
></span135
>136
</p>137
</td>138
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">139
<dl>140
<dt class="mt-align-center">141
<a142
class="F1"143
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"144
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"145
><strong146
><img147
alt=""148
class="internal default"149
height="60.9896px"150
src="/@api/deki/files/16783/Reinsurance_Capability.png"151
style="width: 93.9974px; height: 60.9896px"152
width="93.9974px" /></strong153
></a>154
<strong> </strong>155
</dt>156
</dl>157
158
<p class="mt-align-center">159
<span class="mt-font-size-14"160
><span class="mt-font-arial"161
><a162
class="F1"163
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"164
title="Underwriting for New Business"165
><strong166
>UNDERWRITING FOR NEW BUSINESS - AUGUST167
2021</strong168
></a169
>170
</span></span171
>172
</p>173
</td>174
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">175
<dl>176
<dt class="mt-align-center">177
<a178
class="F1"179
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"180
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"181
><strong182
><img183
alt=""184
class="internal default"185
height="60.9896px"186
src="/@api/deki/files/16783/Reinsurance_Capability.png"187
style="width: 93.9974px; height: 60.9896px"188
width="93.9974px" /></strong></a189
><strong> </strong>190
</dt>191
</dl>192
193
<p class="mt-align-center">194
<span class="mt-font-size-14"195
><span class="mt-font-arial"196
><a197
href="/@api/deki/files/16798/Underwriting_for_New_Business.pdf"198
target="_blank"199
title="https://documentationcenter.com/@api/deki/files/16798/Underwriting_for_New_Business.pdf?origin=mt-web"200
><strong201
>UNDERWRITING FOR NEW BUSINESS -202
PRESENTATION </strong203
></a204
></span205
></span206
>207
</p>208
</td>209
</tr>210
<tr>211
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">212
<dl>213
<dt class="mt-align-center">214
<a215
class="F1"216
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"217
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"218
><img219
alt=""220
class="internal default"221
height="54.2448px"222
src="/@api/deki/files/16806/Data_Transfer_Tool.png"223
style="width: 97.9948px; height: 54.2448px"224
width="97.9948px"225
/></a>226
<strong> </strong>227
</dt>228
</dl>229
230
<p class="mt-align-center">231
<span class="mt-font-size-14"232
><span class="mt-font-arial"233
><a234
class="F1"235
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"236
title="Data Transfer Tool"237
><strong238
>DATA TRANSFER TOOL -<br />239
MAY 2021</strong240
></a241
>242
<strong><strong> </strong></strong></span243
></span244
>245
</p>246
</td>247
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">248
<dl>249
<dt class="mt-align-center">250
<a251
class="F1"252
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"253
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"254
><img255
alt=""256
class="internal default"257
height="54.2448px"258
src="/@api/deki/files/16806/Data_Transfer_Tool.png"259
style="width: 97.9948px; height: 54.2448px"260
width="97.9948px"261
/></a>262
<strong> </strong>263
</dt>264
</dl>265
266
<p class="mt-align-center">267
<span class="mt-font-size-14"268
><span class="mt-font-arial"269
><a270
href="/@api/deki/files/16800/Data_Transfer_Tool.pdf"271
target="_blank"272
title="https://documentationcenter.com/@api/deki/files/16800/Data_Transfer_Tool.pdf?origin=mt-web"273
><strong274
>DATA TRANSFER TOOL -275
PRESENTATION </strong276
></a277
></span278
></span279
>280
</p>281
</td>282
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">283
<dl>284
<dt class="mt-align-center">285
<a286
class="F1"287
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"288
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"289
><img290
alt=""291
class="internal default"292
height="65px"293
src="/@api/deki/files/16809/Rider_Management"294
style="width: 115px; height: 65px"295
width="115px"296
/></a>297
<strong> </strong>298
</dt>299
</dl>300
301
<p class="mt-align-center">302
<span class="mt-font-size-14"303
><span class="mt-font-arial"304
><a305
class="F1"306
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"307
title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"308
><strong>RIDER MANAGEMENT</strong></a309
></span310
></span311
>312
</p>313
</td>314
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">315
<dl>316
<dt class="mt-align-center">317
<a318
class="F1"319
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"320
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"321
><img322
alt=""323
class="internal default"324
height="65px"325
src="/@api/deki/files/16809/Rider_Management"326
style="width: 115px; height: 65px"327
width="115px" /></a328
><strong> </strong>329
</dt>330
</dl>331
332
<p class="mt-align-center">333
<span class="mt-font-size-14"334
><span class="mt-font-arial"335
><a336
href="/@api/deki/files/16802/Rider_Management"337
target="_blank"338
title="https://documentationcenter.com/@api/deki/files/16802/Rider_Management?origin=mt-web"339
><strong340
>RIDER341
MANAGEMENT- PRESENTATION </strong342
></a343
></span344
></span345
>346
</p>347
</td>348
</tr>349
<tr>350
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">351
<dl>352
<dt class="mt-align-center">353
<a354
class="F1"355
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"356
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"357
><img358
alt=""359
class="internal default"360
height="54.0625px"361
src="/@api/deki/files/16810/PTW.png"362
style="width: 100px; height: 54.0625px"363
width="100px"364
/></a>365
<strong> </strong>366
</dt>367
</dl>368
369
<p class="mt-align-center">370
<span class="mt-font-size-14"371
><span class="mt-font-arial"372
><a373
class="F1"374
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"375
title="Product Testing Workbench"376
><strong377
>PRODUCT TESTING WORKBENCH (PTW) - NOVEMBER378
2020</strong379
></a380
>381
<strong><strong> </strong></strong></span382
></span383
>384
</p>385
</td>386
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">387
<dl>388
<dt class="mt-align-center">389
<a390
class="F1"391
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"392
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"393
><img394
alt=""395
class="internal default"396
height="54.0625px"397
src="/@api/deki/files/16810/PTW.png"398
style="width: 100px; height: 54.0625px"399
width="100px"400
/></a>401
<strong> </strong>402
</dt>403
</dl>404
405
<p class="mt-align-center">406
<span class="mt-font-size-14"407
><span class="mt-font-arial"408
><a409
href="/@api/deki/files/16804/Product_Testing_Workbench.pdf"410
target="_blank"411
title="https://documentationcenter.com/@api/deki/files/16804/Product_Testing_Workbench.pdf?origin=mt-web"412
><strong413
>PRODUCT TESTING WORKBENCH (PTW)414
- PRESENTATION </strong415
></a416
></span417
></span418
>419
</p>420
</td>421
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">422
<dl>423
<dt class="mt-align-center">424
<img425
alt=""426
class="internal default"427
height="65px"428
src="/@api/deki/files/16811/RMD.png"429
style="width: 116px; height: 65px"430
width="116px"431
/>432
<strong> </strong>433
</dt>434
</dl>435
</td>436
</tr>437
</tbody>438
</table>Advertisement
Answer
An simple example of filtering using classname filter-items. You may apply the logic in your codes.
JavaScript
1
22
22
1
function filterItems(e) {2
const text = e.target.value.toLowerCase();3
4
const tds = document.querySelectorAll("td");5
6
const items = document.querySelectorAll(".filter-items");7
8
// hide all td9
tds.forEach(td => {10
td.style.display = "none";11
});12
13
// show filtered items14
items.forEach(item => {15
const word = item.textContent.toLowerCase();16
if (word.includes(text)) {17
item.closest("td").style.display = "";18
}19
});20
}21
22
document.querySelector("#myInput").addEventListener("keyup", filterItems);JavaScript
1
18
18
1
<input id="myInput" placeholder="Search for videos.." type="text" />2
3
<table>4
<tbody>5
<tr>6
<td><span class="filter-items">123</span></td>7
<td><span class="filter-items">125</span></td>8
</tr>9
<tr>10
<td><span class="filter-items">abc</span></td>11
<td><span class="filter-items">abe</span></td>12
</tr>13
<tr>14
<td><span class="filter-items">1AB</span></td>15
<td><span class="filter-items">1ac</span></td>16
</tr>17
</tbody>18
</table>