How to get the index of the button clicked?

Question

How to get the index of the button clicked?

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I'm using a loop to dynamically generate elements:

for(var i =0; i< arrSequencia.length;i++ ){
strInterface += "<tr class='formulario'>"+
    "<td class='col-md-1'>"+
        "   <input type=\"button\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\"/>"+
        "</td>"+

    "</tr>";
}

How can I capture the index of the clicked button? For example:

Problem:

If I click the second button, I get the index: 1

    var acaoBotao = function() {
        //PEGAR O INDEX
    };

    function adicionaOuRemove() {
        var botoes = document.getElementsByClassName("btn-info-bloco");
        for(var i=0;i<botoes.length;i++){
            botoes[i].addEventListener('click', acaoBotao, false);
        }
    }

Example:

var arrSequencia = [1,2,3,4,5];
var strInterface ="";

$(document).ready(function(){menuQuestoes = $("#table");

for(var i =0; i< arrSequencia.length;i++ ){
    strInterface += "<tr class='formulario'>"+
                "<td class='col-md-1'>"+
                "   <input type=\"button\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\"/>"+
                "</td>"+

                "</tr>";
}
        menuQuestoes.find("#tbody-content").append(strInterface);

                            
});

var acaoBotao = function() {
    
alert("//PEGAR O INDEX");
};

function adicionaOuRemove() {
    var botoes = document.getElementsByClassName("btn-info-bloco");
    for(var i=0;i<botoes.length;i++){
        botoes[i].addEventListener('click', acaoBotao, false);
    }
}
adicionaOuRemove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><tableid="table" class="table table-bordered">
    <tbody id="tbody-content"></tbody>
</table>

No jsFiddle

javascript jquery

asked by anonymous 07.08.2015 / 20:48

3 answers

0

jQuery

$('.btn').on('click', function(){
   alert(($this).val());
});

Use this for this. In the click function you have to put the selector as class of the button, since there will be several. In your case there are several classes the button, but I put the .btn .

JS

var acaoBotao = function() {
    alert(this.value);
};

07.08.2015 / 20:56

0

As each button is on a separate line from your table, you can "simulate" its index by adding an attribute on your button when you create it, and then retrieving this index using the .data() of jQuery. Example:

for(var i =0; i< arrSequencia.length;i++ ){
strInterface += "<tr class='formulario'>"+
    "<td class='col-md-1'>"+
        "   <input type=\"button\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\" data-index=\" + i +\"/>"+
        "</td>"+

    "</tr>";
}

var acaoBotao = function(el) {
    return $(el.srcElement).data('index');
};

Example on FIDDLE

07.08.2015 / 23:00

CheckBox with External CheckBox Error creating a method in a WFA application in inheritance and polymorphism

score 0 · Accepted Answer

Since you already have a loop to create the buttons, you can use this and insert the index in a data-index field. In this case the code would look like this:

for(var i =0; i< arrSequencia.length;i++ ){
    strInterface += "<tr class='formulario'>"+
                "<td class='col-md-1'>"+
                "   <input type=\"button\" data-index=\"" + i + "\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\"/>"+
                "</td>"+

                "</tr>";
}

and then inside your function acaoBotao you can do:

 var index = this.dataset.index;

Another alternative is to do this when meeting the event observers. In this case you could do this:

var acaoBotao = function (index) {
    return function(){
     // usar o index   
    }
};

function adicionaOuRemove() {
    var botoes = document.getElementsByClassName("btn-info-bloco");
    for (var i = 0; i < botoes.length; i++) {
        botoes[i].addEventListener('click', acaoBotao(i), false);
    }
}