将 jQuery 数据表中一行的所有输入值传递给 asp.net mvc

Question

这是包含我要传递的输入的表格：

代码：

        $(document).ready(function () {

            var table;

            $("#makeEditable").on("mousedown", "td .fa.fa-minus-square", function (e) {
                table.row($(this).closest("tr")).remove().draw();
            })

            $("#makeEditable").on('mousedown.edit', "i.edit.material-icons", function (e) {           
                $(this).text("save").removeClass().addClass("save material-icons");
                var $row = $(this).closest("tr").off("mousedown");
                var $tds = $row.find("td").not(':last');//.not(':first');

                $.each($tds, function (i, el) {
                    var txt = $(this).text();
                    $(this).html("").append("<input type='text' class=\"form-control valid\" value=\"" + txt + "\">");
                });

            });

            $("#makeEditable").on('mousedown', "input", function (e) {
                e.stopPropagation();
            });
$("#makeEditable").on('mousedown.save', "i.save.material-icons", function (e) {
    var ubicacionesJquery = { ubicacion_id : $(this).attr("data-id"), armario: "input1", cajon: "input2" };

    $.ajax({
                    type: 'POST',
                    data: ubicacionesJquery,
                    url: '/gestiondeubicaciones/Editar',
                    cache: false,
                    success: function (result) {
                    }
           });

    $(this).text("edit").removeClass().addClass("edit material-icons");
    var $row = $(this).closest("tr");
    var $tds = $row.find("td").not(':last'); 

    $.each($tds, function (i, el) {
        var txt = $(this).find("input").val()
        $(this).html(txt);
    });
});

这是未处于编辑模式时我的控制器中的 html

@using (Html.BeginForm("AnadirEditar", "gestiondeubicaciones", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <table class="table table-hover table-bordered" id="makeEditable">
        <tfoot>

            <tr>
                <td>
                    <div class="form-group">
                        @Html.TextBoxFor(a => a.armario, new { @class = "form-control", @id = "addArmario" })
                        @Html.ValidationMessageFor(model => model.armario, "", new { @class = "text-danger" })
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        @Html.TextBoxFor(a => a.cajon, new { @class = "form-control", @id = "addCajon" })
                        @Html.ValidationMessageFor(model => model.cajon, "", new { @class = "text-danger" })
                    </div>
                </td>
                <td>
                    <a class="popup-add" href="#" onclick="AddData();" title="Anadir">
                        <i class="add material-icons">add_box</i>
                    </a>
                </td>
            </tr>
        </tfoot>
        <thead>
            <tr>
                <th>Armario</th>
                <th>Cajon</th>
                <th></th>
            </tr>
        </thead>
    </table>
}

这是在编辑模式下控制器中的 html

 <table id="newRow" style="display:none">
        <tbody>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                    <i class="material-icons" aria-hidden="true">edit</i>
                    <i class="delete material-icons">delete</i>
                </td>
            </tr>
        </tbody>
    </table>

这是不在编辑模式下生成的html

<table class="table table-hover table-bordered dataTable dtr-inline" id="makeEditable" role="grid" aria-describedby="makeEditable_info" style="width: 1749px; position: relative;">
    <tfoot>

        <tr>
            <td rowspan="1" colspan="1">
                <div class="form-group">
                    <input class="form-control" id="armario" name="armario" type="text" value="">
                    <span class="field-validation-valid" data-valmsg-for="armario" data-valmsg-replace="true"></span>
                </div>
            </td>
            <td rowspan="1" colspan="1">
                <div class="form-group">
                    <input class="form-control" id="cajon" name="cajon" type="text" value="">
                    <span class="field-validation-valid" data-valmsg-for="cajon" data-valmsg-replace="true"></span>
                </div>
            </td>
            <td rowspan="1" colspan="1"><input type="submit" value="Salvar" class="btn btn-primary"> <a class="popup-add" href="#" onclick="AddData();" title="Anadir"><i class="add material-icons">add_box</i></a></td>
        </tr>
    </tfoot>
    <thead>
        <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="makeEditable" rowspan="1" colspan="1" style="width: 721.767px;" aria-label="Armario: Activar para ordenar la columna de manera descendente" aria-sort="ascending">Armario</th><th class="sorting" tabindex="0" aria-controls="makeEditable" rowspan="1" colspan="1" style="width: 721.767px;" aria-label="Cajon: Activar para ordenar la columna de manera ascendente">Cajon</th><th class="sorting" tabindex="0" aria-controls="makeEditable" rowspan="1" colspan="1" style="width: 190.767px;" aria-label=": Activar para ordenar la columna de manera ascendente"></th></tr>
    </thead>

    <tbody><tr role="row" class="odd">
            <td class="sorting_1" tabindex="0">Grande E3</td>
            <td>232</td>
            <td><a class="popup-edit"><i id="editSave" data-armario="Grande E3" data-id="23" class="edit material-icons" title="Detalles">edit</i></a><a class="popup-delete" href="#" onclick="DeleteData(23);" title="Eliminar"><i class="delete material-icons">delete</i></a></td></tr>
            <tr role="row" class="even"><td class="sorting_1" tabindex="0">Grande F23</td>
            <td>527m</td>
            <td><a class="popup-edit"><i id="editSave" data-armario="Grande F23" data-id="29" class="edit material-icons" title="Detalles">edit</i></a><a class="popup-delete" href="#" onclick="DeleteData(29);" title="Eliminar"><i class="delete material-icons">delete</i></a></td>
            </tr>
   </tbody>
</table>

这是在编辑模式下的变化。

<td><input type="text" class="form-control valid" value="232"></td>

在我写“input1”和“input2”的地方我想要 $tds[0] 和 $tds 1但我不知道如何做 int，我尝试创建一个 var test=[]; 然后test.append(txt);但它没有用。

任何帮助，将不胜感激。谢谢你。

Answer 1

您似乎正在删除和添加元素并刷新表格。您应该将事件绑定在父级上，因为如果删除它们，直接将事件绑定在元素上将不会持久。您可以通过使用来做到这一点$(document).on()。

然后，由于您知道输入元素的位置（距按钮 2 个节点），因此您可以使用.parent(). 进入父节点后，请使用.find()访问您的输入字段。

添加此事件；

$(document).on("click",".save",function(){

   // .parent() = a
   // .parent().parent() = td
   // .parent().parent() = tr
   // .parent().parent().parent().find("input") = look for input fields inside that row

   alert($(this).parent().parent().parent().find("input").val());
});

或者，如果您知道输入字段的 ID，并且您有多个输入字段的 ID，那么您可以这样做；

$(document).on("click",".save",function(){
   // for example if you used id="input1" and id="input2"
   alert($(this).parent().parent().parent().find("#input1").val());
   alert($(this).parent().parent().parent().find("#input2").val());
});

由于您没有命名输入字段，因此您可以使用.eq(index);

$(document).on("click",".save",function(){
   alert($(this).parent().parent().parent().find("input").eq(0).val());
   alert($(this).parent().parent().parent().find("input").eq(1).val());
});

或者如果你想使用.closest()

$(document).on("click",".save",function(){
   alert($(this).closest("tr").find("input").eq(0).val());
   alert($(this).closest("tr").find("input").eq(1).val());
});