Pass the id of an element as a parameter to a function?

Asked

Viewed 369 times

1

I have a table on my site that is automatically generating an id for each table column.

I put the function call on each line.

How would I pass the id of this <td> by parameter in the function so that I can identify which line I am clicking?

NOTE: I am using native javascript + angular

Table template:

<table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>

                            </th>
                            <th>
                                Tipo Ativo
                            </th>
                            <th>
                                Emissor
                            </th>
                            <th>
                                Código
                            </th>
                            <th>
                                Emissão
                            </th>
                            <th>
                                Vencimento
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-click="$ctrl.teste(???)" ng-repeat="dado in $ctrl.dados track by $index">
                            <td>
                                {{dado.campo1}}
                            </td>
                            <td id="dado-{{$index + 1}}">
                                {{dado.tipoAtivo}}
                            </td>
                            <td>
                                {{dado.emissor}}
                            </td>
                            <td>
                                {{dado.codigo}}
                            </td>
                            <td>
                                {{dado.emissao}}
                            </td>
                            <td id="dado2-{{$index + 1}}">
                                {{dado.vencimento}}
                            </td>
                        </tr>
                </table>

controller table:

(function() {
'use strict';

class PesquisaAtivosController {
  constructor($state, $scope){
    this.$state = $state;
    this.$scope = $scope;

    this.dados = [
      {
        campo1 : "0",
        tipoAtivo : "c1",
        emissor : "c2",
        codigo : "c3",
        emissao : "c4",
        vencimento : "01/04/2012"
      },
      {
        campo1 : "0",
        tipoAtivo : "TB - Monthly",
        emissor : "Default",
        codigo : "Default",
        emissao : "01/04/2012",
        vencimento : "02/04/2012"
      },
      {
        campo1 : "0",
        tipoAtivo : "c5",
        emissor : "c6",
        codigo : "c7",
        emissao : "c8",
        vencimento : "03/04/2012"
      },
      {
        campo1 : "0",
        tipoAtivo : "c10",
        emissor : "c11",
        codigo : "c12",
        emissao : "c13",
        vencimento : "04/04/2012"
      },
    ];

    localStorage.setItem('dados1','');
    localStorage.setItem('dados2','');
  }

  teste(???){
    var _this = this;
    var dados1 = document.getElementById('???').innerText;
    var dados2 = document.getElementById('???').innerText;

    console.log("ativo:");
    console.log(dados1);
    console.log(dados2);

    window.localStorage.setItem('dados1', dados1);
    window.localStorage.setItem('dados2', dados2);

    _this.$state.go("home.boletoEstoque2");

  }
}

PesquisaAtivosController.$$ngIsClass = true;
PesquisaAtivosController.$inject = ['$state'];

angular.module('app')
  .controller('PesquisaAtivosController', PesquisaAtivosController);
})();
javascript angularjs javascript-events
  • 2

    Please provide example code for readers to understand the question better

  • Which id do you want to pick up? There are two <td> each with a different id

  • I’m gonna need to get both of you

  • I don’t understand angular, but see if this works: https://jsfiddle.net/hevcczbs/2/

1 answer

0

If I understand correctly, this code (explicit, with native js) will help you. Run, and click the result tds. The Id will appear on the console.

var funcao = function(e){
  console.log(e.target.id);
}

var td = document.getElementsByTagName('td');
for(var i=0; i<td.length; i++){
  td[i].addEventListener('click',funcao)
}
<table border="1">
                    <thead>
                        <tr>
                            <th>

                            </th>
                            <th>
                                Tipo Ativo
                            </th>
                            <th>
                                Emissor
                            </th>
                            <th>
                                Código
                            </th>
                            <th>
                                Emissão
                            </th>
                            <th>
                                Vencimento
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="0">
                                campo1
                            </td>
                            <td id="1">
                                tipoAtivo
                            </td>
                            <td id="2">
                                emissor
                            </td>
                            <td id="3">
                                codigo
                            </td>
                            <td id="4">
                                emissao
                            </td>
                            <td id="5">
                                vencimento
                            </td>
                        </tr>
                </table>

Browser other questions tagged javascript angularjs javascript-events

You are not signed in. Login or sign up in order to post.