cómo pasar los contenidos de una tabla html como datos de formulario en un POST?

Question

Tengo una lista de grupos en un <select> y un <input type="button" value="Add Selected"> para agregar el grupo seleccionado a un <table> de valores.

La lista de grupos que se ha agregado se muestra en un <table>, las filas se agregan dinámicamente mediante javascript en cada clic del botón "Agregar selección". Cada fila en la tabla tiene un enlace "eliminar" que elimina el elemento de la tabla.

Todo funciona bien, excepto que ahora quiero PUBLICAR el contenido de la tabla en una URL, y no estoy seguro de cómo hacerlo.

¿Debo agregar un campo oculto para cada fila en la tabla? ¿O hay una mejor manera de hacer esto?

¡Cualquier sugerencia es muy apreciada!

Rob

Answer 1

envolver su mesa en una forma y poner los datos que desea publicar, pero no mostrar al usuario en las entradas ocultas

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

Answer 2

<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> 

Answer 3

hice algo como esto el otro día , mi solución fue crear una matriz de objetos de mi mesa que pudiera enviar a un servicio web. El servicio web debería esperar una variedad de objetos.

// 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; 
} 

Answer 4

nombre del selecto como un array mediante la adición de [] como esto

<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> 

Creo que después de someter tendrá una matriz en el $ _POST nombrado para este ejemplo módulos

Answer 5

que he hecho que:

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); 
       } 
     ) 
    } 

en el controlador

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

por lo que es mi 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; 
} 

lo estoy usando y es demasiado útiles, espero que le ayude demasiado