tablas - obtener datos de una tabla html javascript

Looping sobre elementos en jQuery

Question

Quiero recorrer los elementos de un formulario HTML y almacenar los valores de los campos <input> en un objeto. El siguiente código no funciona, sin embargo:

function config() {
    $("#frmMain").children().map(function() {
        var child = $("this");
        if (child.is(":checkbox"))
            this[child.attr("name")] = child.attr("checked");
        if (child.is(":radio, checked"))
            this[child.attr("name")] = child.val();
        if (child.is(":text"))
            this[child.attr("name")] = child.val();
        return null;
    });

Ninguno de los siguientes (inspirado en la respuesta de Jobscry):

function config() {
    $("#frmMain").children().each(function() {
        var child = $("this");
        alert(child.length);
        if (child.is(":checkbox")) {
            this[child.attr("name")] = child.attr("checked");
        }
        if (child.is(":radio, checked"))
            this[child.attr("name")] = child.val();
        if (child.is(":text"))
            this[child.attr("name")] = child.val();
    });
}

La alerta siempre muestra que child.length == 0 . La selección manual de los elementos funciona:

>>> $("#frmMain").children() Object length=42 >>> $("#frmMain").children().filter(":checkbox") Object length=3

¿Alguna pista sobre cómo hacer el ciclo correctamente?

Answer 1

He usado lo siguiente antes:

var my_form = $(''#form-id'');
var data = {};

$(''input:not([type=checkbox]), input[type=checkbox]:selected, select, textarea'', my_form).each(
    function() {
        var name = $(this).attr(''name'');
        var val = $(this).val();

        if (!data.hasOwnProperty(name)) {
            data[name] = new Array;
        }

        data[name].push(val);
    }
);

Esto se acaba de escribir desde la memoria, por lo que puede contener errores, pero esto debería hacer un objeto llamado data que contiene los valores de todas sus entradas.

Tenga en cuenta que debe tratar las casillas de verificación de una manera especial, para evitar obtener los valores de las casillas de verificación no marcadas. Lo mismo es probablemente cierto de las entradas de radio.

También tenga en cuenta el uso de matrices para almacenar los valores, como para un nombre de entrada, puede tener valores de varias entradas (casillas de verificación en particular).

Answer 2

Según lo que necesite cada niño (si está buscando publicarlo en algún lugar a través de AJAX), puede hacer ...

$("#formID").serialize()

Crea una cadena para ti con todos los valores automáticamente.

En cuanto a pasar por los objetos, también puedes hacer esto.

$.each($("input, select, textarea"), function(i,v) {
    var theTag = v.tagName;
    var theElement = $(v);
    var theValue = theElement.val();
});

Answer 3

si desea usar cada función, debería verse así:

$(''#formId'').children().each( 
  function(){
    //access to form element via $(this)
  }
);

Simplemente apague el corchete de cierre para una paren cercana. Gracias por señalarlo, Jobscry, me salvaste un tiempo.

Answer 4

jQuery tiene una excelente función para recorrer un conjunto de elementos: .each ()

$(''#formId'').children().each(
    function(){
        //access to form element via $(this)
    }
);

Answer 5

No creo que necesite citas sobre esto:

var child = $("this");

tratar:

var child = $(this);

Answer 6

para mí todo esto no funcionó. Lo que funcionó para mí fue algo realmente simple:

$("#formID input[type=text]").each(function() {
alert($(this).val());
});

Answer 7

Esta es la forma más simple de recorrer un formulario que accede solo a los elementos del formulario. Dentro de cada función puedes verificar y construir lo que quieras. Al construir objetos, tenga en cuenta que querrá declararlo fuera de cada función.

EDITAR JSFIDDLE

Lo siguiente funcionará

$(''form[name=formName]'').find(''input, textarea, select'').each(function() {
    alert($(this).attr(''name''));
});