Javascript 如何在 POST 上将 html 表的内容作为表单数据传递？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10489046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to pass contents of an html table as form data on a POST?
提问by
I have a list of groups in a <select>and a <input type="button" value="Add Selected">to add the selected group to a <table>of values.
我在 a<select>和 a 中有一个组列表，<input type="button" value="Add Selected">用于将所选组添加到 a<table>值中。
The list of groups that's been added is displayed in a <table>, rows are dynamically added by javascript on each click of the "Add Selected" button. Each row in the table has a "remove" link that removes the item from the table.
已添加的组列表显示在 中<table>，每次单击“添加所选”按钮时，javascript 都会动态添加行。表中的每一行都有一个“删除”链接，用于从表中删除项目。
Everything works fine, except now I want to POST the contents of the table to a URL, and I'm not sure how to do this.
一切正常，除了现在我想将表的内容发布到 URL，但我不确定如何执行此操作。
Should I add an hidden field for each row in the table? Or is there a better way to do this?
我应该为表中的每一行添加一个隐藏字段吗？或者有没有更好的方法来做到这一点？
Any suggestions are greatly appreciated!
任何建议都非常感谢！
Rob
抢
采纳答案by Michael Robinson
Wrap your table in a form and put the data you want to post but not display to the user in hidden inputs
将您的表格包装在表格中，并将您要发布但不显示给用户的数据放入隐藏输入中
<form method="post" action="">
<!-- your table -->
<input type="hidden" name="name" value="your value"/>
<button type="submit">Post</button>
</form>
回答by Javier Gutierrez
I have done it:
我已经做了：
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);
}
)
}
in the controller
在控制器中
public static void update(List<OrdenCompraDetalle> objects){
int i=0;
renderJSON(i);
}
So It's my DTO
所以这是我的 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;
}
I'm using it and it's too usefull, hope it help you too
我正在使用它，它太有用了，希望它也能帮助你
回答by Michael Durrant
<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>
回答by Zachary
I did something like this the other day, my solution was to create an array of objects from my table that I could sent to a web service. The web service should expect an array of objects.
前几天我做了类似的事情，我的解决方案是从我的表中创建一个可以发送到 Web 服务的对象数组。Web 服务应该期待一个对象数组。
// 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;
}
回答by khaled_webdev
name of select as array by adding [] like this
通过像这样添加 [] 来选择作为数组的名称
<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>
i think after submit you will have an array in your $_POST named for this example modules
我认为提交后，您的 $_POST 中将有一个数组，以此示例模块命名
