asked on
<table class="prodTable">
<tr>
<td></td>
<td>Camaro</td>
<td>96-97</td>
<td>5.7L LT1</td>
<td>1-3/4"</td>
<td>3"</td>
<td>
<p class="designNotes">6, 9, 10,</p> <!--Insert actual note labels to retrieve proper results -->
</td>
<td class="partno">82-1161</td>
</tr>
<tr>
<td></td>
<td>Camaro</td>
<td>98-99</td>
<td>5.7L LS1</td>
<td>1-3/4"</td>
<td>3"</td>
<td>
<p class="designNotes">2, 3, 9, </p>
</td>
<td class="partno">82-1163</td>
</tr>
<tr>
<td></td>
<td>Camaro</td>
<td>98-02</td>
<td>5.7L LS1</td>
<td>1-3/4"</td>
<td>3"</td>
<td>
<p class="designNotes">1, 4, 5,</p>
</td>
<td class="partno">82-1163</td>
</tr>
</table>
var modal = document.getElementById('designNotesModal');
var p = document.getElementById("designNotes"); // Get the element that opens the modal
var span = document.getElementsByClassName("close")[0]; // Get the button that opens the modal
p.onclick = function() { modal.style.display = "block";} // When the user clicks on the button, open the modal
span.onclick = function() { modal.style.display = "none";} // When the user clicks on <span> (x), close the modal
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }}
// When the user clicks anywhere outside of the modal, close it
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("desgnNotes"); //Get the Search criteria
filter = input.value.toUpperCase(); //Initiate filter - need to be able to join search criteria
table = document.getElementById("desgnTable"); //Get the product table within the modal
tr = table.getElementsByTagName("tr"); //loop through the table
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0]; // find the correct results
if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else { tr[i].style.display = "none"; // display correct results
} } } }
Modal and working selector<p id="designNotes">1,2,3,4</p>
<div id="designNotesModal" class="modal2">
<div class="modal-content-Notes">
<div class="modal-body-Notes">
<table id="desgnTable" cellspacing="0" cellpadding="0">
<col span="2">
<tr>
<td>1,</td>
<td> Flanged Collector</td>
</tr>
<tr>
<td>2,</td>
<td> Slip-fit Collector</td>
</tr>
<tr>
<td>3,</td>
<td> Hook-ups for smog </td>
</tr>
<tr>
<td>4,</td>
<td> No smog hook-ups</td>
</tr>
</table>
</div></div></div>