Javascript 如何在单击“添加”按钮时从表中添加或删除记录，并在提交时将所有表行发送给控制器？
我正在分享我的任务的图像： 我有一个问题，当我点击“添加”按钮时，所有字段数据都将显示在下表中，我想将多个产品添加到此表中，如果用户想从表中删除任何产品，请点击“删除”按钮。 添加产品后，当用户单击“提交”时，所有记录都发送到控制器方法 我正在分享一些我想做的代码 视图代码Javascript 如何在单击“添加”按钮时从表中添加或删除记录，并在提交时将所有表行发送给控制器？,javascript,jquery,sql,model-view-controller,Javascript,Jquery,Sql,Model View Controller,我正在分享我的任务的图像： 我有一个问题，当我点击“添加”按钮时，所有字段数据都将显示在下表中，我想将多个产品添加到此表中，如果用户想从表中删除任何产品，请点击“删除”按钮。 添加产品后，当用户单击“提交”时，所有记录都发送到控制器方法 我正在分享一些我想做的代码 视图代码 <div class="row"> <div class="col-md-12"> <div class="tile"> <div>
<div class="row">
<div class="col-md-12">
<div class="tile">
<div>
<h1><i class="fa fa-th-list"></i> Inventory</h1>
<p>Issu Products to Unit</p>
</div>
@Html.Partial("~/Views/Shared/_ErrorMsgPartial.cshtml")
<div class="tile-body">
<span style="color:red; font-weight:bold;">Note: Dont Enter Quantity Morethan Availabale Quantity</span>
@using (Html.BeginForm("IssueProduct", "Inventory", FormMethod.Post, new { @id = "formPost" }))
{
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Available Qty</th>
<th>Issue Qunatity</th>
<th>Unit</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
@Html.DropDownList("productId", null, "Select One", htmlAttributes: new { @class = "form-control", id = "demoSelect" })
@Html.ValidationMessageFor(model => model.productId, "", new { @class = "text-danger" })
</td>
<td id="GetAvlbQty" style="font-weight: bold;color: red;text-align: center;">
@{Html.RenderPartial("GetAvlbQty", Model);}
</td>
<td>
@Html.EditorFor(model => model.invQty, new { htmlAttributes = new { @class = "form-control", id = "invcQty", @PlaceHolder = "Enter Quantity To Issue" } })
@Html.ValidationMessageFor(model => model.productId, "", new { @class = "text-danger" })
</td>
<td>
@Html.DropDownListFor(model => model.invUnit, new List<SelectListItem>
{
new SelectListItem{Text="Unit A",Value="Unit A"},
new SelectListItem{Text="Unit B",Value="Unit B"},
}, "Select Unit", htmlAttributes: new { @class = "form-control", id = "unit" })
@Html.ValidationMessageFor(model => model.invUnit, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.invDescription, new { htmlAttributes = new { @class = "form-control", id = "descrip", @PlaceHolder = "Enter Description" } })
@Html.ValidationMessageFor(model => model.invDescription, "", new { @class = "text-danger" })
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-outline-success btn-s classAdd">Add</button>
</td>
</tr>
</tbody>
</table>
<table id="tablePost" class="table table-hover table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Available Qty</th>
<th>Issue Qunatity</th>
<th>Unit</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
<input type="submit" class="btn btn-outline-success btn-sm" value="Save" />
}
</div>
</div>
</div>
</div>
库存
发行产品至单位
@Html.Partial（“~/Views/Shared/\u ErrorMsgPartial.cshtml”）
注意：输入的数量不得超过可用数量
@使用（Html.BeginForm（“IssueProduct”、“Inventory”、FormMethod.Post、new{@id=“formPost”}））
{
产品
可用数量
发行量
单元
描述
行动
@DropDownList（“productId”，null，“Select One”，htmlAttributes:new{@class=“form control”，id=“demoSelect”}）
@Html.ValidationMessageFor（model=>model.productId，“，new{@class=“text danger”}）
@{Html.RenderPartial（“GetAvlbQty”，Model）；}
@EditorFor（model=>model.invQty，new{htmlAttributes=new{@class=“form control”，id=“invcQty”，@PlaceHolder=“Enter Quantity To Issue”}）
@Html.ValidationMessageFor（model=>model.productId，“，new{@class=“text danger”}）
@Html.DropDownListFor（model=>model.invUnit，新列表
{
新建SelectListItem{Text=“Unit A”，Value=“Unit A”}，
新建SelectListItem{Text=“Unit B”，Value=“Unit B”}，
}，“选择单位”，HtmlatAttributes:new{@class=“form control”，id=“Unit”}）
@Html.ValidationMessageFor（model=>model.invUnit，“，new{@class=“text danger”}）
@EditorFor（model=>model.invDescription，new{htmlAttributes=new{@class=“form control”，id=“descripp”，@PlaceHolder=“Enter Description”}）
@Html.ValidationMessageFor（model=>model.invDescription，“，new{@class=“text danger”}）
添加
产品
可用数量
发行量
单元
描述
行动
}
$(document).ready(function () {
$("#btnAdd").on("click", function () {
var demoSelect = $("#demoSelect :selected").text();
var invcAvlbQty = $("#availableQty").val();
var invcQty = $("#invcQty").val();
var unit = $("#unit :selected").val();
var descrip = $("#descrip").val();
$("#tablePost > tbody").append("<tr><td>" +
demoSelect + "</td><td>" + invcAvlbQty + "</td><td>" + invcQty + "</td><td>" + unit + "</td><td>" + descrip + "</td></tr>");
});
});
$（文档）.ready（函数（）{
$（“#btnAdd”）。在（“单击”，函数（）{
var demoSelect=$（“#demoSelect:selected”）.text（）；
var invcAvlbQty=$（“#可用数量”）.val（）；
var invcQty=$（“#invcQty”）.val（）；
变量单位=$（“#单位：选定”）.val（）；
var descripp=$（“#descrip”）.val（）；
$（“#tablePost>tbody”）.append（”+
demoSelect+“”+invcAvlbQty+“”+invcQty+“”+unit+“”+descrip+“”）；
});
});
如何解决此问题？从创建表是否要在列表中添加记录-
<div>
<table>
<tr>
<td><input type="text" id="txt1"/></td>
<td><input type="submit" id="btnAdd" value="Add"/></td>
</tr>
</table>
</div>
<div>
<table id="tbldata"> </table>
</div>
<div>
<input type="submit" id="btnsubmit" value="Save"/>
</div>
$('#btnsubmit').click(function(){
GetRecord();
})
function GetRecord()
{
var table = $("#tbldata");
//find all table tr value usnig each loop
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
ItemName = $tds.eq(0).val();
SaveRecord(ItemName);
}
function SaveRecord(ItemName) {
$.ajax({
type: 'GET',
dataType: 'json',
url: "Controllername/actionname",
data: { _ItemName : ItemName },
success: function (Data) {
localStorage.clear();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
希望对您有所帮助。bro如何使用我在问题中提到的所有字段。。。这些字段var demoSelect=$（“#demoSelect:selected”）.text（）；var invcAvlbQty=$（“#可用数量”）.val（）；var invcQty=$（“#invcQty”）.val（）；变量单位=$（“#单位：选定”）.val（）；var descripp=$（“#descrip”）.val（）；您的GetRecord方法为missing“，”或其他任何内容提供了错误。。。。请解决此问题，并告诉我如何获取所有“td”数据并在提交时将其发送给控制器。我的问题中已经提到了所有tds。谢谢你你只使用了一个项目，但我想要所有项目。。。我对这个不太熟悉。因此，请帮助我，您可以轻松地在td中添加所有记录，然后单击“提交”按钮，它将读取循环中的所有记录，它将读取第一行，然后发送给控制器，然后第二行，然后发送给控制器，依此类推。如果要读取tr中的第二个td值，请添加secondtdvalue=$tds.eq（1.val（），ThirdtdValue=ItemName=$tds.eq（2.val（）；为什么它发送一个接一个的值？我想一次发送所有值。。。。首先在javascript中保存，并在
$('#btnsubmit').click(function(){
GetRecord();
})
function GetRecord()
{
var table = $("#tbldata");
//find all table tr value usnig each loop
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
ItemName = $tds.eq(0).val();
SaveRecord(ItemName);
}
function SaveRecord(ItemName) {
$.ajax({
type: 'GET',
dataType: 'json',
url: "Controllername/actionname",
data: { _ItemName : ItemName },
success: function (Data) {
localStorage.clear();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}