Product/Price/City Search (Javascript / jQuery)

Question

someone knows the best language to do this research, I want to click the value and get the value of the product, the city, and the price and put in the panel below?

table{ border-collapse: collapse !important; }
table tr td input{ width: 100%; border: none; background-color: #fff; }
table tr td input:hover{ width: 100%; border: none; background-color: #E7E9E8; cursor: pointer; }
section legend{ border-bottom: 1px solid #000; width: 55%; margin-bottom: 10px; }
section article{ width: 40%; background-color: #CC6F23; margin: 10px; padding: 10px;}
section article p{ margin: 0px; font-weight: bold; color: #fff; }

<table border="1" id="table">
      <tr class="cabecalho">
          <th class="not">ESTOQUE <br/><span>Produto / Preço / Cidade</span></th>
          <th class="coluna">Cidade 01</th>
          <th class="coluna">Cidade 02</th>
          <th class="coluna">Cidade 03</th>
          <th class="coluna">Cidade 04</th>
          <th class="coluna">Cidade 05</th>
          <th class="coluna">Cidade 06</th>
          <th class="coluna">Cidade 07</th>
          <th class="coluna">Cidade 08</th>
      </tr>
      <tr>
          <th class="feijao"><span>FEIJÂO</span></th>
          <td><input type="button" value="3.20" class="btn"/></td>
          <td><input type="button" value="2.00" class="btn"/></td>
          <td><input type="button" value="3.00" class="btn"/></td>
          <td><input type="button" value="4.00" class="btn"/></td>
          <td><input type="button" value="3.00" class="btn"/></td>
          <td><input type="button" value="4.00" class="btn"/></td>
          <td><input type="button" value="3.00" class="btn"/></td>
          <td><input type="button" value="4.00" class="btn"/></td>
      </tr>
       <tr>
          <th class="arroz"><span>ARROZ</span></th>
          <td><input type="button" value="2.45" class="btn"/></td>
          <td><input type="button" value="1.25" class="btn"/></td>
          <td><input type="button" value="1.40" class="btn"/></td>
          <td><input type="button" value="2.10" class="btn"/></td>
          <td><input type="button" value="3.00" class="btn"/></td>
          <td><input type="button" value="4.00" class="btn"/></td>
          <td><input type="button" value="3.00" class="btn"/></td>
          <td><input type="button" value="4.00" class="btn"/></td>
      </tr>
       <tr>
          <th class="farinha"><span>FARINHA</span></th>
          <td><input type="button" value="1.30" class="btn"/></td>
          <td><input type="button" value="2.50" class="btn"/></td>
          <td><input type="button" value="2.80" class="btn"/></td>
          <td><input type="button" value="2.80" class="btn"/></td>
          <td><input type="button" value="1.30" class="btn"/></td>
          <td><input type="button" value="2.50" class="btn"/></td>
          <td><input type="button" value="2.80" class="btn"/></td>
          <td><input type="button" value="2.80" class="btn"/></td>
      </tr>

</table>
   <section><legend>Painel</legend>
          <article>
                <p>Cidade: <span></span></p>
                <p>Prduto: <span></span></p>
                <p>Preço: <span></span></p>
          </article>
   </section>

Answer 1

You can do it like this:

var article = getElements('article p span');

function getElements(selector, rel) {
    var list = (rel || document).querySelectorAll(selector);
    return [].slice.call(list);
}

function handler(el, indexTr, indexTd) {
    return function(e) {
        var cidade = cols[indexTd].innerHTML;
        var produto = linhas[indexTr].querySelector('th').innerHTML;
        var preco = el.innerHTML;

        [cidade, produto, preco].forEach(function(val, i) {
            article[i].innerHTML = val;
        });
    }
}

var cols = getElements('th').slice(1);
var linhas = getElements('tr').slice(1);
linhas.forEach(function(tr, i) {
    var tds = getElements('td', tr);
    tds.forEach(function(td, j) {
        td.addEventListener('click', handler(td, i, j));
    });
});

jsFiddle: https://jsfiddle.net/hr7mejnm/1

Separating into three parts:

• Organize elements into groups for later use
• go through the td and add event headphones that hold the line and speaker number
• fetch the data and distribute it in the result fields

If you need more help understanding the code I give a clarification tomorrow. Today is what it was. Good luck.