web-dev-qa-db-fra.com

comment passer le contenu d'une table html sous forme de données de formulaire sur un POST?

J'ai une liste de groupes dans un <select> et un <input type="button" value="Add Selected"> pour ajouter le groupe sélectionné à un <table> de valeurs.

La liste des groupes qui ont été ajoutés est affichée dans un <table>. Les lignes sont ajoutées dynamiquement par javascript à chaque clic sur le bouton "Ajouter la sélection". Chaque ligne de la table a un lien "supprimer" qui supprime l'élément de la table.

Tout fonctionne bien, sauf que maintenant je veux POST afficher le contenu du tableau sous une URL et je ne sais pas comment faire.

Dois-je ajouter un champ caché pour chaque ligne de la table? Ou y a-t-il une meilleure façon de faire cela?

Toutes les suggestions sont grandement appréciées!

Rob

javascripthtml
15
Robert Hume

Enveloppez votre table dans un formulaire et placez les données que vous souhaitez publier mais ne pas afficher à l'utilisateur dans des entrées masquées

<form method="post" action="">
    <!-- your table -->
    <input type="hidden" name="name" value="your value"/>
    <button type="submit">Post</button>
</form>
10
Michael Robinson

Je l'ai fait:

function sendTableArticles() {
        var columns = [
            'articulo.id',
            'articulo.descripcion',
            'unidadMedida.descripcion',
            'precio',
            'importe',
            'totalRequerido',
            'totalIngresado'
        ];

        var tableObject = $('#table_articles tbody tr').map(function (i) {
            var row = {};
            $(this).find('td').each(function (i) {
                var rowName = columns[i];
                row[rowName] = $(this).text();
            });

            return row;
        }).get();


        $.post('@{OrdenComprasDetalles.update()}',
                {objects:tableObject},
                function (response) {
                    console.log(response);
                }
        )
    }

dans le contrôleur

public static void update(List<OrdenCompraDetalle> objects){
        int i=0;
        renderJSON(i);
    }

Donc c'est mon DTO

@Entity(name = "ordencompradetalle")
public class OrdenCompraDetalle extends AbstractTableMapper {

    @ManyToOne
    public Articulo articulo;

    public Float precio;

    public Float importe;

    public Boolean ingresado;

    @Column(name = "total_requerido")
    public Float totalRequerido;

    @Column(name = "total_ingresado")
    public Float totalIngresado;

    @ManyToOne
    public OrdenCompra ordenCompra;

    @ManyToOne
    public UnidadMedida unidadMedida;

    @OneToMany(mappedBy = "ordenCompraDetalle")
    public List<Movimiento> movimientos;
}

Je l'utilise et c'est trop utile, j'espère que cela vous aidera aussi

6
Javier Gutierrez
<form method="post" action="your_server_action">
  <table>
    <!-- Table row display elements -->
    <input type="hidden" name="name" value="your value"/>
  </table>
  <input type="submit" value="Submit"/>
</form>
3
Michael Durrant

J'ai fait quelque chose comme ça l'autre jour. Ma solution était de créer un tableau d'objets de ma table que je pourrais envoyer à un service Web. Le service Web doit s'attendre à un tableau d'objets.

// Read all rows and return an array of objects
function GetAllRows()
{
    var myObjects = [];

    $('#table1 tbody tr').each(function (index, value)
    {
        var row = GetRow(index);
        myObjects.Push(row);
    });

    return myObjects;
}

// Read the row into an object
function GetRow(rowNum)
{
    var row = $('#table1 tbody tr').eq(rowNum);

    var myObject = {};

    myObject.ChangeType = row.find('td:eq(1)').text();
    myObject.UpdateType = row.find('td:eq(2)').text();
    myObject.CustomerPart = row.find('td:eq(3)').text();
    myObject.ApplyDate = row.find('td:eq(9)').text();
    myObject.Remarks = row.find('td:eq(10)').text();

    return myObject;
}
3
Zachary

nom de select as array en ajoutant [] comme ceci

<select name="modules[]" id="modules" class="inputbox" size="10" multiple="multiple">
<option value="1">Module 01</option>
<option value="2">Module 02</option>
<option value="3">Module 03</option>
</select>

je pense qu'après soumission vous aurez un tableau dans votre $ _POST nommé pour cet exemple de modules

1
khaled_webdev