How do I get the column number of the table where an input I’m writing is?

Question

I have text inputs in cells of 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 is in column 1, 2 or 3. How to achieve this?

$(".campo").on("input", function(){
    // ?????        
});

Answer 1

you can turn your collection of inputs into a list, so look at the input input input inside 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 it 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><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>

Answer 2

Use the 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
})

Among these two, I prefer to use the closest('td'), because if I put the input within a div, even being inside this, he would still continue to catch the td - unlike parent, that would take the div

The index(), in turn, serves to capture the position of the element in the DOM, that would be counted from the position 0 (the first element).

See it working on JSFIDDLE

Answer 3

Either you create a property in the element or you can apply a 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)