Javascript 单击表中的动态按钮上的事件

我的页面上有一个datatables元素，第一列隐藏，最后有一个空列包含一个按钮

我正在尝试使该按钮的单击事件：

隐藏按钮

显示“正在加载”图标-列中已存在此图标

检索对应行的隐藏列的值

显示成功/失败图标-待添加，但将是一个成功/失败图标

CSHTML:

<div class="row">
    <div class="col-sm-12">
        <table class="table table-striped table-hover" id="SignOffTable">
            <thead>
                <tr>
                    <th>DATA_ID</th>
                    <th>KPI Name</th>
                    <th>Value 1</th>
                    <th>Value 2</th>
                    <th>Value 3</th>
                    <th>Date For</th>
                    <th>Value Type</th>
                    <th>Added By</th>
                    <th>Added On</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Items)
            {
                    <tr>
                        <td>
                            @item.DATAID
                        </td>
                        <td>
                            @item.KPIHead
                        </td>
                        <td>
                            @item.Value1
                        </td>
                        <td>
                            @item.Value2
                        </td>
                        <td>
                            @item.Value3
                        </td>
                        <td>
                            @item.FromDate.ToString("dd/MM/yyyy")
                        </td>
                        <td>
                            @item.Type
                        </td>
                        <td>
                            @item.AddedBy
                        </td>
                        <td>
                            @item.AddedOn.ToString("dd/MM/yyyy")
                        </td>
                        <td id="ActionCol">
                            <button id="TableSignOff" class="btn btn-outline-success btn-sm" data-interaction="@item.DATAID">Sign Off</button>
                            <div id="Loader"><span id="Loading" class="fa fa-spinner fa-pulse fa-fw"></span></div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

数据标识
KPI名称
值1
价值2
价值3
日期
值类型
由添加
加上
行动
@foreach（Model.Items中的var项）
{
@item.DATAID
@项目1.KPIHead
@项目1.1
@项目1.2
@项目3.3
@项目.从日期到字符串（“日/月/年”）
@项目.类型
@项目1。由附录B添加
@添加到字符串（“日/月/年”）
签字
}

脚本：

<script>
    $(document).ready(function () {
        $("div#Loader").hide();

        var table = $('#SignOffTable').DataTable({
            paging: true,
            searching: false,
            ordering: false,
            pagingType: "simple_numbers",
            lengthChange: false,
            bfilter: true,
            info: true,
            "columnDefs": [
            { "visible": false, "targets": 0 }
            ]
        });
    });

    $("#SignOffTable button").click(function () {
        $(this).hide();
        $('div#Loader').show();
        var trElem = $(this).closest("tr");
        var firstTd = $(trElem).children("td")[0];
        alert($(firstTd).text())
    })
</script>

$（文档）.ready（函数（）{
$（“div#Loader”）.hide（）；
变量表=$（'#SignOffTable'）。数据表({
是的，
搜索：假，
订购：错，
pagingType:“简单数字”，
长度变化：错误，
B过滤器：是的，
信息：没错，
“columnDefs”：[
{“可见”：false，“目标”：0}
]
});
});
$（“#SignOffTable按钮”）。单击（函数（）{
$（this.hide（）；
$（'div#Loader'）.show（）；
var-trElem=$（this.closest（“tr”）；
var firstTd=$（trElem）.children（“td”）[0]；
警报（$（firstTd.text（））
})

---

但是，我似乎无法访问隐藏列的数据，也无法成功隐藏按钮/显示加载微调器。页面加载时微调器图标隐藏，单击按钮将隐藏该按钮，但随后将显示列中的所有微调器，而不仅仅是该特定微调器。

您正在为元素创建重复ID。这是无效的HTML，将导致您的代码混淆它试图访问的元素

使用类而不是ID，类似这样的内容应该会有所帮助：

<td>
  <button class="TableSignOff btn btn-outline-success btn-sm" data-interaction="@item.DATAID">Sign Off</button>
  <div class="Loader" hidden>
    <span class="fa fa-spinner fa-pulse fa-fw" ></span>
  </div>
</td>

签字

及

$（文档）.ready（函数（）{
变量表=$（'#SignOffTable'）。数据表({
是的，
搜索：假，
订购：错，
pagingType:“简单数字”，
长度变化：错误，
B过滤器：是的，
信息：没错，
“columnDefs”：[
{“可见”：false，“目标”：0}
]
});
});
$（“#SignOffTable.TableSignOff”）。单击（函数（）{
var btn=$（本）；
btn.hide（）；//隐藏按钮
btn.parent（）.find（“.Loader”）.show（）；//在按钮的父td中显示加载程序
警报（btn.data（“交互”）；//输出数据ID
})

---

还请注意，加载器在开始时是通过标记而不是代码隐藏的，因此在代码运行之前，不会立即显示加载器。

您正在创建多个到处都具有相同ID的元素（因为@foreach）。这是无效的HTML-ID必须是唯一的。您的代码无法理解您所指的元素，因此无法正常工作。为元素提供唯一的ID（或者根本没有ID），并使用类和作用域来标识要操作的元素。是否建议以另一种方式创建表？只是，它是从查询数据库结果集的模型构建的，所以每次都会有所不同。隐藏列中有一个唯一标识符-可以将其用作唯一标识符吗？不能直接用于标识元素。您不需要以不同的方式创建表，只需稍微更改输出，这样就不会创建重复的ID。好的-有没有关于如何/从何处开始的建议？太接近了。。！！您的代码会提醒隐藏的列并隐藏该特定按钮，但加载微调器不会显示…@danverbs，它根本不会提醒隐藏的列内容。它会提醒按钮“数据交互”属性中的值。这恰好与隐藏列中的值相同，可能是因为您这样编码的。这听起来可能很挑剔，而且这只是一个技术问题，但我发现在记录和调试代码时，尽可能精确地描述实际发生的事情会有所帮助。e、 你可以改变隐藏列的内容而不改变代码，那么你的声明就不真实了。值得考虑的是all@danverbs关于加载微调器，我将“hidden”命令放在了错误的元素上——它应该放在具有“loading”类的元素上。我已经更新了答案，现在应该可以正常工作了。不，你是对的，我确实在代码中看到了这一点，我完全错了！我可以看到它从按钮中获取值，而不是这个隐藏列

<script>
$(document).ready(function () {

    var table = $('#SignOffTable').DataTable({
        paging: true,
        searching: false,
        ordering: false,
        pagingType: "simple_numbers",
        lengthChange: false,
        bfilter: true,
        info: true,
        "columnDefs": [
        { "visible": false, "targets": 0 }
        ]
    });
});

$("#SignOffTable .TableSignOff").click(function () {
    var btn = $(this);
    btn.hide(); //hide the button
    btn.parent().find(".Loader").show(); //show the loader within the button's parent td
    alert(btn.data("interaction")); //output the DATAID
})