Pessoal, esse código ta mim retornando certo, só que tem um probleminha ele tá sobrescrevendo o outro painel, eu queria que um fosse para baixo do outro.
OBS: na mesma linha ele pode sobreescrever o painel, mas quando pular de linha o resultado vá para baixo. Alguem pode mim ajudar?
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('td').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));
});
});
<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>