[SOLUCIONADO] Delimitar funcion Jquery.each al recorrer tablas

nibollo · #1 (**permalink**) 15/08/2014, 17:56

Holaaaas! He estado leyendo acerca de la funcion para recorrer las filas de una tabla en Jquery, hay muuuchos ejemplos por la red pero ninguno me muestra la manera de como agarrar una sola fila (definida) de tres columnas ("tomar los valores y mostralos en un alert")

no tendrian alguna idea de como hacerlo?

Algunos codigos que encontre..

Código Javascript:

Ver original$('#tblUsuario tr').each(function () {
 
var Referencia = $(this).find("td").eq(0).html();
var Nombre = $(this).find("td").eq(1).html();
var Edad = $(this).find("td").eq(3).html();
 
});

Código HTML:

Ver original<body>
<table border="1">
<thead>
<tr><th>Referencia</th><th>Nombre</th><th>Edad</th></tr>
</thead>
<tbody>
<tr><td>101</td><td>Juan</td><td>23</td></tr>
<tr><td>102</td><td>Oscar</td><td>33</td></tr>
<tr><td>103</td><td>Pedro</td><td>45</td></tr>
</tbody>
</table>
</body>

Estuve leyendo http://api.jquery.com/jQuery.each/ para saber si habia un ejemplo practico que pudiera darme una idea, pero ñe

y encontre esta mas o menos similiar pero no toma los valores, solo filtra http://www.elclubdelprogramador.com/2014/05/14/jquery-filtra-filas-de-una-tabla-con-jquery/

Gracias ..

Alexis88 · #2 (**permalink**) 15/08/2014, 18:17

Te equivocaste de documentación, ese es otro método, homónimo, pero diferente. En la documentación del método each que usas en el ejemplo, se precisa que como argumentos de la función que se ejecuta por cada elemento encontrado, debes de indicar el número de elemento y al propio elemento, es decir:

Código Javascript:

Ver original$('#tblUsuario tr').each(function(index, element){
    var Referencia = $(element).find("td").eq(0).html(),
        Nombre = $(element).find("td").eq(1).html(),
        Edad = $(element).find("td").eq(3).html();
});

Saludos

nibollo · #3 (**permalink**) 15/08/2014, 18:24

Cita:

Iniciado por Alexis88

Te equivocaste de documentación, ese es otro método, homónimo, pero diferente. En la documentación del método [URL="http://api.jquery.com/each/"][inline]each[/inline][/URL] que usas en el ejemplo, se precisa que como argumentos de la función que se ejecuta por cada elemento encontrado, debes de indicar el número de elemento y al propio elemento, es decir:

Código Javascript:

Ver original$('#tblUsuario tr').each(function(index, element){
    var Referencia = $(element).find("td").eq(0).html(),
        Nombre = $(element).find("td").eq(1).html(),
        Edad = $(element).find("td").eq(3).html();
});

Saludos

jajajaja tenes razon!

Muchas gracias! ahora me paso a leerlo!! En cuando tenga un ejemplo propio lo subo por sí alguien mas lo necesite

nibollo · #4 (**permalink**) 15/08/2014, 20:11

Acaaaa estaaaa

Código HTML:

Ver original<html>
  <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
      <script>          
          function nibollo(){  
              var textos = '';
              var selected = '';
              $('#formid input[type=radio]').each(function(){
                if (this.checked) {
                  selected += $(this).val();
                }
              });
 
              for (var i = selected-1; i < selected; i++) {
                  for (var j = 0; j < document.getElementById('tabladatos').rows[i].cells.length; j++) {
                      textos = textos + document.getElementById('tabladatos').rows[i].cells[j].innerHTML + ' | ';
                  }
                  textos = textos + '\n';
              }
              alert(textos);
              return false;
          }         
 
 
      </script>
  </head>
 
  <body>
      <table class="tabladatos" id="tabladatos" border="1">
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
          </tr>
          <tr>
              <td>nibollo</td>
              <td>nibollo</td>
              <td>nibollo</td>
              <td>nibollo</td>
          </tr>
          <tr>
              <td>Columna 1</td>
              <td>Columna 2</td>
              <td>Columna 3</td>
              <td>Columna 4</td>
          </tr>
          <tr>
              <td>----------</td>
              <td>----------</td>
              <td>----------</td>
              <td>----------</td>
          </tr>
      </table>
    <br><span>Selecciona una Fila para mostrar:</span></br>
    <form id="formid">
      <input value="1" name="fila" onclick="nibollo();" type="radio" /><label>Fila 1</label>
      <input value="2" name="fila" onclick="nibollo();" type="radio" /><label>Fila 2</label><br>
      <input value="3" name="fila" onclick="nibollo();" type="radio" /><label>Fila 3</label>
      <input value="4" name="fila" onclick="nibollo();" type="radio" /><label>Fila 4</label><br>
    </form>
 
  </body>
 
</html>

Encontre otra funcionalidad para el .each y un metodo mas facil de llegar al resultado

no es taaaaaan perfecto pero hace lo que busco

Gracias..

Editado, (una manera mas fácil ):

Código HTML:

Ver original<html>
  <head>
      <script>
          function checkbutton(id) {
                  var textos = [];
                  var val = document.getElementById(id).value;
                  document.getElementById(id).value = val;
                  for (var i = id-1; i < id; i++) {
                      for (var j = 0; j < document.getElementById('tabladatos').rows[i].cells.length; j++) {
                          textos.push(document.getElementById('tabladatos').rows[i].cells[j].innerHTML);
                      }
                      alert(textos[0]+" | "+textos[1]+" | "+textos[2]+" | "+textos[3]);
                      return false;
                  }
          }
      </script>
  </head>
 
  <body>
      <table class="tabladatos" id="tabladatos" border="1">
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
          </tr>
          <tr>
              <td>nibollo</td>
              <td>nibollo</td>
              <td>nibollo</td>
              <td>nibollo</td>
          </tr>
          <tr>
              <td>Columna 1</td>
              <td>Columna 2</td>
              <td>Columna 3</td>
              <td>Columna 4</td>
          </tr>
          <tr>
              <td>----------</td>
              <td>----------</td>
              <td>----------</td>
              <td>----------</td>
          </tr>
      </table>
    <br><span>Selecciona una Fila para mostrar:</span></br>
    <form id="formid">
      <input value="Fila 1" name="fila" id="1" onClick="checkbutton('1');" type="button" />
      <input value="Fila 2" name="fila" id="2" onClick="checkbutton('2');" type="button" /><br>
      <input value="Fila 3" name="fila" id="3" onClick="checkbutton('3');" type="button" />
      <input value="Fila 4" name="fila" id="4" onClick="checkbutton('4');" type="button" /><br>
    </form>
 
  </body>
 
</html>