0

Tengo una tabla HTML con sus respectivas filas y columnas, la primera columna contiene un botón llamado btn_anexo, la segunda columna contiene los ID de cada fila.

Actualmente, si hago click en el botón, este me devuelve en una alerta el valor del ID desde la fila en la que estoy haciendo click. Lo hago de la siguiente forma:

$(document).on('click','#btn_anexo',function(){ 
            
            var fila = $(this).parent();
            var id = fila.siblings("td:eq(0)").text();
            alert (id);
            
        });

No tengo ningún problema con esto, pero quisiera hacer lo mismo, pero desde una función externa. Es decir, de la siguiente forma:

$(document).on('click','#btn_anexo',function(){ 
   alert (obtener_id());
});

function obtener_id(){
    var fila = $(this).parent();
    var id = fila.siblings("td:eq(0)").text();
    return id;
}

Pero resulta que no logro obtener el valor. ¿Cómo podría hacerlo?

2 respuestas 2

0

Si te entendí bien, por cada fila de tu tabla tienes un botón con ID "btn_anexo". No es recomendable tener más de un control con el mismo ID en tu DOM. Lo recomendable para esos casos es utilizar una clase.

Una vez aclarado eso, ahora tengo una duda. No sería mejor obtener el Id de la fila en la que se presionó el botón y después pasásrselo a la función externa? Algo así:

$("#example").on("click", ".js-anexo", function() {

    var id = $(this).data("id");
    obtener_id(id);
});

function obtener_id(id){
    alert(id);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="example" class="table table-bordered table-striped" style="width:100%">
  <thead>
    <tr>
      <th></th>
      <th>Id</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button class="js-anexo" data-id="1">Anexo</button></td>
      <td>1</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="2">Anexo</button></td>
      <td>2</td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="3">Anexo</button></td>
      <td>3</td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="4">Anexo</button></td>
      <td>4</td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="5">Anexo</button></td>
      <td>5</td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="6">Anexo</button></td>
      <td>6</td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="7">Anexo</button></td>
      <td>7</td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="8">Anexo</button></td>
      <td>8</td>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="9">Anexo</button></td>
      <td>9</td>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="10">Anexo</button></td>
      <td>10</td>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
  </tbody>
</table>

Pero si aún prefieres hacerlo de la manera en la que lo solicitaste, como ya bien mencionó @g4, cuando ejecutas tu función obtener_id, $(this) es null porque solo existe en el ámbito de tu EventListener. Sin embargo, lo puedes pasar como parámetro, como en este ejemplo:

$("#example").on("click", ".js-anexo", function() {
    alert(obtener_id($(this)));
});

function obtener_id(fila){
    var fila = fila.parent();
    var id = fila.siblings("td:eq(0)").text();
    return id;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="example" class="table table-bordered table-striped" style="width:100%">
  <thead>
    <tr>
      <th></th>
      <th>Id</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button class="js-anexo" data-id="1">Anexo</button></td>
      <td>1</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="2">Anexo</button></td>
      <td>2</td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="3">Anexo</button></td>
      <td>3</td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="4">Anexo</button></td>
      <td>4</td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="5">Anexo</button></td>
      <td>5</td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="6">Anexo</button></td>
      <td>6</td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="7">Anexo</button></td>
      <td>7</td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="8">Anexo</button></td>
      <td>8</td>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="9">Anexo</button></td>
      <td>9</td>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td><button class="js-anexo" data-id="10">Anexo</button></td>
      <td>10</td>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
  </tbody>
</table>

3
  • Estimado, "btn_anexo" es una clase que tiene el botón no es el id, el ID es la celda que esta en la segunda columna, el cual quiero obtener, eh pensado un poco y se me a ocurrido crear un input tipo hidden, por lo que cada ves que presiono en el botón se pasa el valor del id al input, para luego recuperarlo desde otra funcion. Commented el 12 sept. 2020 a las 4:16
  • @JonathanAlarcon: Asumí que era el ID porque tienes esta linea $(document).on('click','#btn_anexo',function(). Tanto en CSS como en jQuery haces referencia a un elemento del DOM por su ID anteponiendo un # (como en #btn_anexo). Si se tratara de una Clase se utiliza . (punto). Saludos!
    – Sagnalrac
    Commented el 12 sept. 2020 a las 6:19
  • Respecto a la idea que se te ocurrió, no entiendo cuál sería la diferencia? Para obtener el valor de la columna ID necesitas que se dispare el evento click del botón, de lo contrario cómo vas a saber qué fila seleccionaron? A menos que incluyas otra manera de seleccionar una fila, por ejemplo, agregar un checkbox en la primer columna (en lugar del botón). Ahí si no necesitarías que se dispare ningún evento para poder obtener el ID desde una función.
    – Sagnalrac
    Commented el 12 sept. 2020 a las 6:29
0

Yo intentaría pasar la referencia del contexto de ejecución (this) al llamar a la función externa, puede que se haya perdido la referencia:

$(document).on('click','#btn_anexo',function(){ 
   //alert (obtener_id());
   let myId= obtener_id.apply(this);
   alert(myId);
});

El contexto de ejecución se puede pasar con el método apply; al usar apply, ya no necesitas cambiar nada de tu función obtener_id.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.