Jquery 将HTML表内容获取到MVC控制器

更新此帖子的底部

我有一个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>

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

列表框的

onclick

事件如下所示：

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

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

并产生以下输出：

我认为有一种比我现在做的更好的方法，但我在这里有点迷茫，我认为用正则表达式或字符串操作解析HTML不是这里的答案

有人能建议/引导我以一种体面的方式做我想做的事吗？ 如果有任何问题，请提问

亲切的问候

更新 感谢@Adyson，我已将AddSelectedProductToTable（）更改为以下内容：

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

 $("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]）。查找（“input”）已添加，我需要将此部分的text（）更改为val（）：
Name:$（输入[0]）.val（）
，以便能够检索值

非常感谢ADyson
与其发回HTML片段，不如发回HTML中的值

您可以使用jQuery提取这些内容，例如使用
.text（）
获取
td
中的文本（而不是
.html（）
），或者使用
.val（）
获取输入字段中的值（当然，输入字段本身位于另一个
td
中）

使用jQuery在客户端解析值要比在服务器上尝试解析值容易得多，jQuery就是为此而设计的。而且你也不会来回发送毫无意义的额外HTML标记

另外，类似于
var tb=$（tdlist[1]）.find（“input”）
的内容应该会得到您的文本框（假设它在您行的索引1中）。然后，您可以使用
tb.val（）
提取输入框中的值。
而不是发回HTML片段，只需发回HTML中的值……您可以使用jQuery提取这些值，例如使用.text（）获取td中的文本（而不是.HTML（）），或者使用.val（）获取输入字段中的值（当然，这本身就在另一个td中）。使用专门设计的jQuery在客户端解析这些值要比在服务器上尝试解析容易得多。而且你也不会来回发送毫无意义的额外HTML标记。@ADyson，我已经尝试过了，但似乎没有正确地测试它，因为这确实有效，至少对我的第一个值（Id）有效但是第二个值是一个空字符串，这是一种逻辑，因为第二个td标记中有一个输入控件，所以td文本值为“”。如何在AddSelectedProductToTable（）函数中获取输入控件值？谢谢您！如果需要，您可以将其作为答案发布。类似于
$（tdlist[1]）。查找（“输入”）
应该会得到你的文本框（假设它在你所在行的索引1中）。下面是find（）方法的示例。看看这是否有帮助。如果你让它工作起来，我会将所有内容作为答案发布