Jquery table search based on column and header

Question

I need to get a value(price) from a html table based on column 1 and header.

The table looks like this:

The html code looks like this:

    <input id="search_height" placeholder="height...">
    <input id="search_width" placeholder="width...">

    <input id="result" placeholder="Price is...">

    <br>
    <table>
    <tr id="width"><th></th><th>30</th><th>60</th><th>70</th><th>80</th><th>90</th><th>100</th></tr>


<tr>
<td id="height">60</td><td>442</td><td>850</td><td>999</td><td>1852</td><td>2442</td><td>3999</td>
</tr>

<tr>
<td id="height">70</td><td>2442</td><td>2850</td><td>2999</td><td>21852</td><td>22442</td><td>23999</td>   
</tr> 

<tr>
<td id="height">80</td><td>3442</td><td>3850</td><td>3999</td><td>31852</td><td>32442</td><td>33999</td>
</tr> 

<tr>
<td id="height">90</td><td>1442</td><td>4850</td><td>4999</td><td>41852</td><td>42442</td><td>43999</td>
</tr>

</table>

I want to have a function in jquery that recives me the correct price and prints the number in:

<input id="result" placeholder="Price is...">

Based on these two inputs

<input id="search_width" placeholder="Width...">
<input id="search_height" placeholder="Height...">

For example if i write 70 in height and 80 in width it shall print out 3999 in:

   <input id="result" placeholder="Price is...">

In theory like this pic:

See JSfiddle

Answer 1

If someone need here is another solution: Working solution

$(document).ready(function(){

   var x=[];
   var y=[];


  function getTableData(){
     var j=0;
    $('table tr:first-child').find('th').each(function(){   

     y.push(parseInt($(this).html()));
      x[0]=y;
    });   

        for(i=1; i<$('table tr').length; i++){


      y=[];
      var row=$('table tr').get(i);  
     $(row).find('td').each( function(){ 


       y.push(parseInt($(this).html()));

     });
     x[i]=y;

    }

   }

   getTableData(); 


    var indexH=0;
    var indexW=0;

 $('#search_width').on('keyup', function(){
 var valueW=parseInt($(this).val());
   $('#result').val(" ");
   $('table tr:first-child').find('th').each(function(){

     if(valueW===parseInt($(this).html())){

          indexW=$(this).index();  
          if(indexH){

              $('#result').val(x[indexH][indexW]);

            }

          }

   }); 

 });

   $('#search_height').on('keyup', function(){

     var valueH=parseInt($(this).val());
     $('#result').val(" ");

        $('table tr td:first-child').each(function(){

     if(valueH===parseInt($(this).html())){

         indexH=$(this).parent().index();
         if(indexW){

            $('#result').val( x[indexH][indexW] );

               }

         }

   });

 });

 });

Answer 2

I got it to work, thanks for reading. JSfiddle

    <input id="search_width" placeholder="Width...">
<input id="search_height" placeholder="Height...">

<br>
<input id="round_width" placeholder="roundWidth...">
<input id="round_height" placeholder="roundHeight...">
<br>
<input id="result" placeholder="Price is...">

<br>
<table id="mytable">
<tr id="width"><th></th><th>30</th><th>60</th><th>70</th><th>80</th><th>90</th><th>100</th></tr>

<tr>
<td id="height">60</td><td>442</td><td>850</td><td>999</td><td>1852</td><td>2442</td><td>3999</td>
</tr>

<tr>
<td id="height">70</td><td>2442</td><td>2850</td><td>2999</td><td>21852</td><td>22442</td><td>23999</td>   
</tr> 

<tr>
<td id="height">80</td><td>3442</td><td>3850</td><td>3999</td><td>31852</td><td>32442</td><td>33999</td>
</tr> 

<tr>
<td id="height">90</td><td>1442</td><td>4850</td><td>4999</td><td>41852</td><td>42442</td><td>43999</td>
</tr>

</table>

 var rows = $( "#mytable tr" ).length;
 var columns = $( "#mytable th" ).length;

  alert("rows are " + columns + " st" );

 function updatePrice2(){
 for(i = 2; i < $("#mytable th").length+1; i++) {  

    var mywidth = document.getElementById('search_width').value,
        myheight = document.getElementById('search_height').value,
        result = document.getElementById('round_width'),
        result2 = document.getElementById('round_height'),
        myResult;

 var r = $( "#mytable tr:nth-child(1) th:nth-child("+i+")" ).text();


  if (mywidth == r) { 

for(p = 2; p < $("#mytable tr").length+1; p++) { 

var q = $( "#mytable tr:nth-child("+p+") td:nth-child(1)" ).text();
if (myheight == q) { 
alert(q);

 myResult = $( "#mytable tr:nth-child("+p+") td:nth-child("+i+")" ).text();
 result.value = Math.round(myResult);
      result2.value = Math.round(myResult);

  }
 }
 }
 }
 }
$(document).on("change, keyup", "#search_width", updatePrice2);
$(document).on("change, keyup", "#search_height", updatePrice2);