cách chuyển nội dung của bảng html dưới dạng dữ liệu biểu mẫu trên POST?

Question

Tôi có danh sách các nhóm trong một số <select> và <input type="button" value="Add Selected"> để thêm nhóm đã chọn vào một giá trị <table>.

Danh sách các nhóm được thêm vào được hiển thị trong một <table>, các hàng được thêm động bởi javascript trên mỗi nhấp chuột của nút "Thêm đã chọn". Mỗi hàng trong bảng có liên kết "xóa" loại bỏ mục khỏi bảng.

Mọi thứ hoạt động tốt, ngoại trừ bây giờ tôi muốn ĐĂNG nội dung của bảng lên URL và tôi không chắc chắn cách thực hiện việc này.

Tôi có nên thêm trường ẩn cho mỗi hàng trong bảng không? Hoặc là có một cách tốt hơn để làm điều này?

Bất kỳ đề xuất nào được đánh giá cao!

Rob

Answer 1

Quấn bảng của bạn trong một hình thức và đưa các dữ liệu bạn muốn gửi nhưng không hiển thị cho người dùng ở đầu vào ẩn

<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

tôi đã làm một cái gì đó như thế này ngày khác , giải pháp của tôi là tạo một mảng các đối tượng từ bảng của tôi mà tôi có thể gửi đến một dịch vụ web. Dịch vụ web sẽ mong đợi một mảng các đối tượng.

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

tên chọn như mảng bằng cách thêm [] như thế này

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

tôi nghĩ rằng sau khi gửi bạn sẽ có một mảng trong $ của bạn _POST tên ví dụ này module

Answer 5

Tôi đã làm nó:

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

trong bộ điều khiển

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

Vì vậy Đó là DTO của tôi

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

Tôi đang sử dụng nó và nó quá hữu ích, hy vọng nó giúp bạn quá