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

Posted 2023-05-07

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

【英文标题】：Pass all input values from a row in jQuery datatable to asp.net mvc

【发布时间】：2020-07-15 14:43:30

【问题描述】：

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

代码：

        $(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] 和 $tds1 但我不知道如何做 int，我尝试创建一个 var test=[];然后test.append(txt); 但它没有用。

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

【问题讨论】：

“追加”到数组：var test=[]; test.push(value);

这并不是为了解决您的问题，只是为了解决 var test=[]; test.append(txt); 的问题，这会导致您出现脚本错误 - 检查您的控制台是否有其他错误。

我不完全理解您的问题是什么以及为什么您需要var test=[] 或$tds.eq(0) 来解决任何问题。对于“使行可编辑”，我建议您在每个单元格中渲染输入和标签/跨度，然后在它们之间渲染$().toggle() - 这比每次重新创建/删除（$(this).html(txt)）输入要可靠得多。

此时，当您单击保存时，它会覆盖任何输入及其值（因此删除输入）。您没有包含代码，但猜测是您在单击编辑时插入/创建新输入（否则编辑+保存只会工作一次）。而不是这样做，使用$tds.find("input").hide().next().show()（或类似的，基于你的HTML，同样，你没有包括，所以不能具体）。

Here is the table with the inputs I want to pass: 您在标题中提到您正在尝试提交选定的行。您要提交什么，整个表格还是仅提交您单击保存按钮的一行？

【参考方案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 并且您有多个，则可以这样做；

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

【讨论】：

我已经尝试了您的两种解决方案，但是我在警报弹出窗口中未定义而不是值？

@JuniorCortenbach 哦，好吧，我刚刚检查过，.save 位于 <i> 元素上，而不是 <a> 上。我添加了另一个 .parent()

@JuniorCortenbach $(this).parent().parent().parent()

@JuniorCortenbach 我添加了另一个答案尝试$(this).parent().parent().parent().find("input").eq(1).val()

@JuniorCortenbach 不错！不客气，祝项目顺利