getElementsByClassName not working within a table

I am using jquery on a product list on shopify.  I know Im on the right track below but really am stuck.  This is way out of my wheel house.  Thanks in advance for your assistance

I have a huge table of products with a column for design notes which once clicked, opens a model with a table which lists the specific notes for that product.  My problem is 2-fold
     1. I can get the modal to fire no problem not using a table and using getElementByID but once I put it in a table, change the variables and change it to getElementsByClassName  or getElementsByTagName it will not work
     2.  I only want the specific notes for that product to show which I cannot make happen,  I either get all of the notes or none and I know it is because of joining issues with the initial selector that fires the modal

Initial table:
<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>

Open in new window

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
      }  }  } }

Open in new window

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>

Open in new window

Joe ReichsfeldFounder, Owner, Business ConsultantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
You don't have an element with class="close" so the span variable is undefined (line 3 in script)
0
Joe ReichsfeldFounder, Owner, Business ConsultantAuthor Commented:
My bad, had removed the header to save space

<p id="designNotes">1,2,3,4</p>
<div id="designNotesModal" class="modal2">
  <div class="modal-content-Notes">
<div class="modal-header-notes">
      <span class="close">&times;</span>
      <h2>Design Notes</h2>
    </div>
    <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>

Open in new window

0
Leonidas DosasCommented:
Do you  want when clicking a td in a row to open a modal and set the td innnerHtml in the modal?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Joe ReichsfeldFounder, Owner, Business ConsultantAuthor Commented:
Hello, Thanks for responding,

Yes I do, specifically this:

 <td>
<p class="designNotes">2, 3, 9, </p>
</td>

Open in new window


When a user clicks the above within the table, it fires the modal, it only contains the specific notes indicated-  class="designNotes"v and filtered from the table in the modal
0
Leonidas DosasCommented:
I have made some changes in your code as you see below to make the functionality more simple. Innitially i added classes in rows at modal table and a data-id's attr. Then via jquery I check and get the text of the paragraph's in the first table. Based on these values I set diasplay property in every row that its data-id is equal to one of the above values. Test the code.
  <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	table,tr,td{
	border:solid 1px black;
	}
	
	</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>

    <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">4,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>




<div id="designNotesModal" class="modal2">
  <div class="modal-content-Notes">
    <div class="modal-header-notes">
      <span class="close">&times;AAAAA</span>
      <h2>Design Notes</h2>
    </div>
    <div class="modal-body-Notes">
  <table id="desgnTable" cellspacing="0" cellpadding="0">
  <col span="2">
  <tr class="modalRow" data-id="1">
    <td>1</td>
    <td> Flanged Collector</td>
  </tr>
  <tr class="modalRow" data-id="2">
    <td>2,</td>
    <td> Slip-fit Collector</td>
  </tr>
  <tr class="modalRow" data-id="3">
    <td>3,</td>
    <td> Hook-ups for smog </td>
  </tr>
  <tr class="modalRow" data-id="4">
    <td>4,</td>
    <td> No smog hook-ups</td>
  </tr>
</table>
</div></div></div>


<script>
$('#designNotesModal').css('display','none');    
    
$('p').on('click',function (e){
    $('#designNotesModal').css('display','block');
    var data=$(this).text();
    e.preventDefault();
    data=data.split(',',3);    
    $('.modalRow').css('display','none');
    for(var i=0;i<data.length;i++){
        console.log(data[i]);
       $('.modalRow[data-id='+data[i]+']').css('display','table-row'); 
    }   
    
});



</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Joe ReichsfeldFounder, Owner, Business ConsultantAuthor Commented:
Wow, thank you very much for your assistance, it is much appreciated.

The only issue i see is that it is not getting any items higher than #9.  I have rows that go up to 31 and it skips numbers here and there once in the 20's
0
Leonidas DosasCommented:
Joe set the number character strings inside the p element without whitespace...ie 9,10,20,23 and not 9,  10,  20,  23
1
Joe ReichsfeldFounder, Owner, Business ConsultantAuthor Commented:
The problem was actually not anything to do with the numbers themselves or the spaces.  It was data=data.split(',',3);   Once I changed the 3 to a higher number, everything is perfect.

Thanks for your assistance.
0
Joe ReichsfeldFounder, Owner, Business ConsultantAuthor Commented:
Leonidas,  So what exactly ties it to the table?  Your solution has it firing correctly on the table now that the daya.split picks up all of the notes, but also fires, empty on every single other p tag on a page.  Putting me right back where I started   Not being able to correctly fire it from within the table without causing other issues.  Any alternatives?
0
Leonidas DosasCommented:
Replace the JQuery script with this test it:
  $('#designNotesModal').css('display','none');    
    
$('p').on('click',function (e){
    $('#designNotesModal').css('display','block');
    var data=$(this).text();
    e.preventDefault();
    data=data.split(',');
    data_1=data.pop();    
    $('.modalRow').css('display','none');
    for(var i=0;i<data.length;i++){
        console.log(data[i]);
       $('.modalRow[data-id='+data[i]+']').css('display','table-row'); 
    }   
    
});

Open in new window

0
Joe ReichsfeldFounder, Owner, Business ConsultantAuthor Commented:
The only thing that changed above is now I cannot get all of the notes again

Here it is on codepen changed slightly but still not showing the right number of notes and still firing on any p element on the page

https://codepen.io/jagsweb/pen/xPbLJm
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.