Передайте все входные значения из строки в 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());
});

---

ИЛИ, если вам известны идентификаторы из полей ввода, и у вас есть более одного, вы можете сделать;

$(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());
});