JSFiddle - React, Tailwind, and code Playground
by Sure Sure
HTML
<select onchange="tblfilter('ex1',this.options[this.selectedIndex].value);">
<option value="">All</option>
<option value="sword">Sword</option>
<option value="lance">Lance</option>
<option value="bow">Bow</option>
<option value="rod">Rod</option>
</select>
<table id="ex1">
<tr title="sword"><td>1</td></tr>
<tr title="bow"><td>2</td></tr>
<tr title="lance"><td>3</td></tr>
</table>
JavaScript
function tblfilter(nm,key){
if(!document.getElementsByTagName) return;
var trs = document.getElementById(nm).rows;
for(var i=0; i<trs.length; i++){
var tr = trs[i];
if(!tr.title || tr.title=='') continue;
var found=0;
if(key == '') found=1;
else {
var keys = tr.title.split(',');
for(var j=0; j<keys.length; j++){
if(keys[j] == key){ found=1; break; }
}
}
tr.style.display = found?'':'none';
}
}