Javascript, get the number of time an imput value occured in Table

Question

I am generating a table onclick, in my html when this function triggers

let start = 1;
let end = start+14
function generateTab(tab){
    tabRow =   `<div>
                    <table class="table" id="gen-table">`;
                        for (let i = start; i <= end; i++) 
                            tabRow +=
                            `<tr>
                                <td>${i+1}</td>
                                <td>
                                    <input type="text" name="tab[${i}]"
                                     id="tab[${i}]" size="10" 
                                     onchange="myFunc(this, ${i})" 
                                     value="${JSON.parse(tab)[`${i}`] ? 
                                     JSON.parse(tab)[`${i}`].name :''}">
                                </td>
                            </tr>`;
                        tabRow +=
                        `</tbody>
                    </table>
                </div>`
    start+= 15;
    end= start+ 14;
    return tabRow ;
}

This is how the table is.

In the input there is an onchange() function. IN that function I need to get how many times the value is present in the table. For example if I change the first row, I should get 1. Because there were two rows with the value "Apple". And I just changed one. So, there is now only 1 row with value "Appple".

Here is my myFunc function

function myFunc (data, i){
    var input= document.getElementById('box['+i+']').value;
    var table = document.getElementById("gen-table");
    var occurance= table.innerHTML.split(/\W+/).filter(
        function(v){return v==input}
    ).length;
   console.log(occurance);
}

I cannot seem to get it work. Any help on how to get it in the myFunc will be appreciated.

This should not be done by messing around with innerHTML (which does not contain the dynamically entered values to begin with, btw.) - but by looping over the input fields. — CBroe, Oct 05 '22 at 08:07
@CBroe any suggestion on how to loop over the input fields and do what I need to do here? I am kind of stuck here for a while. — mage 456, Oct 05 '22 at 08:10
https://stackoverflow.com/questions/12330086/how-to-loop-through-selected-elements-with-document-queryselectorall — CBroe, Oct 05 '22 at 08:14
_"For example if I change the first row, I should get 1. Because there were two rows with the value "Apple". And I just changed one. So, there is now only 1 row with value "Appple"."_ - then you will need to keep the information that the field content _was_ `Apple` before you changed it, somewhere. — CBroe, Oct 05 '22 at 08:15
I am keeping that informatin in the input variable. when I console log it, I can get the new value of that input field. — mage 456, Oct 05 '22 at 08:17

score 0 · Accepted Answer · answered Oct 05 '22 at 09:52

There's a typo in your myFunc function ("box[" vs "tab["). This is how I'd do it:

function myFunc (data, i){  
  var input= document.getElementById('tab['+i+']').value;  
  var table = document.getElementById("gen-table");  
  var occurance = table.querySelectorAll("input[value="+input+"]");  
  console.log(occurance.length);  
}

Also, constructing that first string is a little messy, so I'd do it like this:

for (let i = start; i <= end; i++) {  
let tabName = JSON.parse(tab)[i] ? JSON.parse(tab)[i].name :'';  
//...  
value="${tabName}">  
//...  
}

Javascript, get the number of time an imput value occured in Table

1 Answers1