使用jquery检索表中的文本值

我有以下html（使用Razor在表中显示行）：

我工作，但我不确定这是正确的和优化的方式

---

有更好的解决方案吗？

因为您可能有多行（因为运行foreach），所以可以为每行中的h4元素分配一个唯一的id

例如，对于第一行中的h4元素，id=“h4_0”，对于第二行中的h4元素，id=“ht_1”

然后，您可以将“onclick”属性添加到每个按钮，这些按钮使用行索引作为参数调用特定函数。在该函数中，可以将行索引与 “h4_3;”并且您在同一行中具有h4元素的id

第一行的示例：

<h4 class="group-name" id="h4_0" > @Html.DisplayFor(m => item.Name)</h4>


<a class="btn btn-small btn-danger delete-group-btn" onclick="doSomething(0)">

<script>
    function doSomething(rowIndex) {
        var h4Id = "h4_" + rowIndex;
        // Do something ...
    }
</script>

@Html.DisplayFor（m=>item.Name）
函数doSomething（行索引）{
var h4Id=“h4_”+行索引；
//做点什么。。。
}

---

这不是最好的解决方案，但也很有效：）

因为您可能有多行（因为运行foreach），所以可以为每行中的h4元素分配一个唯一的id

例如，对于第一行中的h4元素，id=“h4_0”，对于第二行中的h4元素，id=“ht_1”

然后，您可以将“onclick”属性添加到每个按钮，这些按钮使用行索引作为参数调用特定函数。在该函数中，可以将行索引与 “h4_3;”并且您在同一行中具有h4元素的id

第一行的示例：

<h4 class="group-name" id="h4_0" > @Html.DisplayFor(m => item.Name)</h4>


<a class="btn btn-small btn-danger delete-group-btn" onclick="doSomething(0)">

<script>
    function doSomething(rowIndex) {
        var h4Id = "h4_" + rowIndex;
        // Do something ...
    }
</script>

@Html.DisplayFor（m=>item.Name）
函数doSomething（行索引）{
var h4Id=“h4_”+行索引；
//做点什么。。。
}

这不是最好的解决方案，但也很有效：）

我将id添加到“数据目标”属性中，类似这样：

@foreach (var item in Model.AllGroups)
        {
            <tr class="group-row" data-id="@item.Id">
                <td class="align-middle text-primary">
                    <h4 class="group-name" id="@item.Id"> @Html.DisplayFor(m => item.Name)</h4>
                </td>
                <td>
                    <a class="btn btn-small btn-primary detail-group-btn">
                        <i class="fas fa-user text-white"></i>
                    </a>
                    <a class="btn btn-small btn-secondary edit-group-btn">
                        <i class="fa fa-edit text-primary"></i>
                    </a>
                    <a class="btn btn-small btn-danger delete-group-btn" data-target="@item.Id">
                        <i class="fa fa-trash text-white bg-"></i>
                    </a>
                </td>
            </tr>
        }

$( '#' + $(this).data('target') ).text();

我将id添加到“数据目标”属性中，如下所示：

@foreach (var item in Model.AllGroups)
        {
            <tr class="group-row" data-id="@item.Id">
                <td class="align-middle text-primary">
                    <h4 class="group-name" id="@item.Id"> @Html.DisplayFor(m => item.Name)</h4>
                </td>
                <td>
                    <a class="btn btn-small btn-primary detail-group-btn">
                        <i class="fas fa-user text-white"></i>
                    </a>
                    <a class="btn btn-small btn-secondary edit-group-btn">
                        <i class="fa fa-edit text-primary"></i>
                    </a>
                    <a class="btn btn-small btn-danger delete-group-btn" data-target="@item.Id">
                        <i class="fa fa-trash text-white bg-"></i>
                    </a>
                </td>
            </tr>
        }

$( '#' + $(this).data('target') ).text();

---

如果

h4

是

中唯一的标记，则可以直接使用不带类名的标记。类似这样的内容：

$（'h4'，$（this）.closest（'tr'））.text（）我对Jquery了解不够，但我认为它在性能方面是最好的解决方案（它不会以这种方式搜索整个DOM），但在可读性方面…您所做的很好如果
h4
是
中唯一的一个，您可以直接使用不带类名的标记。类似这样的内容：
$（'h4'，$（this）.closest（'tr'））.text（）我对Jquery了解不够，但我认为它是性能方面的最佳解决方案（它不会以这种方式搜索整个DOM），但就可读性而言…您正在做的是使用ID是一个好主意，但属性“onclick”没有那么好。感谢您的建议，但正如Daniele所说，我不想使用ID硬编码onclick事件是个好主意，但属性“onclick”没有那么好。谢谢你的建议，但正如Daniele所说，我不想硬编码onclick事件有趣的模式，我会有一个LookInterest模式，我会看看