这篇文章的更新BOTTOM
我有一个HTML表看起来像:
<table class="table table-hover" id="selectedProductsForContract">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-8">
<p>Product name</p>
</td>
<td class="col-md-1">
<input type="number" class="form-control" value="1">
</td>
<td class="col-md-2">
<button type="button" class="btn btn-danger">
Remove
</button>
</td>
</tr>
</tbody>
</table>
我打算用从选择列表框的值动态填充。我生成使用@Html.ListBox()
列表框
@Html.ListBox("allProducts", allProductsForSupplier, new { ID = "allProductsListbox", @class = "form-control", @onclick = "AddSelectedProductToTable()" })
ListBox的onclick
事件是这样的:
<script>
function AddSelectedProductToTable() {
var selectedProduct = $("#allProductsListbox option:selected").text();
$("#selectedProductsForContract").find('tbody')
.append($('<tr>' +
'<td class="col-md-8"><p>' + selectedProduct + '</p></td>' +
'<td class="col-md-1"> <input type="number" class="form-control" value="1"> </td>' +
'<td class="col-md-2"> <button type="button" class="btn btn-danger" onclick="RemoveSelectedProductFromTable(this)"> Remove </button > </td>' +
'</tr>'));
}
</script>
一旦表被填充,我需要张贴选择回服务器的产品名称和数量。
我已经试过几件事情,但我得到的最接近使用下列内容:
<script type="text/javascript">
$(function () {
$("#btnInsert").click(function () {
var itemlist = [];
//get cell values, instead of the header text.
$("table tr:not(:first)").each(function () {
var tdlist = $(this).find("td");
var Item = { ID: $(tdlist[0]).html(), Name: $(tdlist[1]).html() };
itemlist.push(Item);
})
$.ajax({
url: '@Url.Action("InsertValue", "Contract")', //
dataType: "json",
data: JSON.stringify({ itemlist: itemlist }),
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
alert("success");
},
error: function (xhr) {
alert("error");
}
});
});
});
</script>
其中邮政回以下控制器:
[HttpPost]
public JsonResult InsertValue(Item[] itemlist)
{
foreach (var i in itemlist)
{
//loop through the array and insert value into database.
}
return Json("Ok");
}
我觉得这是比我现在在做一个更好的办法,但我在这里种丢了,我觉得解析出与正则表达式或字符串操作HTML是不是这里的答案...
任何人都可以建议/指引我走向做我想要的东西的一个体面的方式?如果有任何疑问,请向。
亲切的问候!
UPDATE感谢@Adyson我已经改变了AddSelectedProductToTable()以下:
$("table tr:not(:first)").each(function () {
var tdlist = $(this).find("td");
var input = $(tdlist[1]).find("input");
var Item = { ID: $(tdlist[0]).text(), Name: $(input[0]).val() };
itemlist.push(Item);
})
凡var input = $(tdlist[1]).find("input");
已经加入,我需要改变这一部分的文本()为val():Name: $(input[0]).val()
能够检索值。
THANK YOU SO MUCH ADyson!
而不是回发的HTML片段,只是在HTML中回来后的值。
你可以提取那些使用jQuery,例如使用.text()
得到在td
(而不是.html()
)的文本,或.val()
获得(当然其本身是另一个td
内,)输入字段内的值。
这是很容易分析出使用jQuery这是专为目的,而不是试图值的客户端,并在服务器上。而且你再不要发无意义的额外HTML标记来回。
附:像var tb = $(tdlist[1]).find("input")
东西应该让你的文本框(假设它里面你排索引1)。然后你可以使用tb.val()
提取进入框中的值。