I have text inputs on cells in a table.
<table>
<tr>
<td>Bola</td>
<td>Casa</td>
<td>Arvore</td>
</tr>
<tr>
<td><input type="text" class='campo' /></td>
<td><input type="text" class='campo' /></td>
<td><input type="text" class='campo' /></td>
</tr>
</table>
When I type in one of them, I want to know if it's in column 1, 2 or 3. How can I achieve this?
$(".campo").on("input", function(){
// ?????
});
You can transform your collection of inputs into a list, then look at the input index within this list:
var campos = document.querySelectorAll(".campo");
var colunaAtual = document.getElementById("colunaAtual");
//converter coleção de elementos em array.
campos = [].slice.apply(campos);
var onCampoClick = function () {
colunaAtual.textContent = campos.indexOf(this) + 1;
}
campos.forEach(function (campo) {
campo.addEventListener("input", onCampoClick);
});<table>
<tr>
<td>Bola</td>
<td>Casa</td>
<td>Arvore</td>
</tr>
<tr>
<td><input type="text" class='campo' /></td>
<td><input type="text" class='campo' /></td>
<td><input type="text" class='campo' /></td>
</tr>
</table>
Coluna Atual: <span id="colunaAtual" type="number"></span>If you want to do with jQuery:
var campos = $(".campo");
var colunaAtual = $("#colunaAtual");
//converter coleção de elementos em array.
campos = [].slice.apply(campos);
$(document).on("input", campos, function (event) {
colunaAtual.html(campos.indexOf(event.target) + 1);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td>Bola</td><td>Casa</td><td>Arvore</td></tr><tr><td><inputtype="text" class='campo' /></td>
<td><input type="text" class='campo' /></td>
<td><input type="text" class='campo' /></td>
</tr>
</table>
Coluna Atual: <span id="colunaAtual" type="number"></span> Use parent or closest .
See with parent .
$(".campo").on("focus", function ()
{
var $td = $(this).parent();
console.log($td.index()); //index
})
See with closest
$(".campo").on("focus", function ()
{
var $td = $(this).closest('td');
console.log($td.index()); //index
})
Of these two, I prefer to use closest('td') , because if I put input inside a div , even being inside it, it would still keep catching td - unlike parent , which would get div
The index() , in turn, serves to capture the position of the element in DOM , which would be counted from the 0 (the first element) position.
See this working on JSFIDDLE
Either you create a property on the element or you can apply logic based on the code below:
var tr = document.createElement('tr'),
td = document.createElement('td');
tr.appendChild(td); // Simulação de um <tr><td></td></tr>
Array.prototype.indexOf.call(tr.childNodes, td); // Retorna a posição do td, no caso, retorna 0. (-1 = Não achou)