javascript - 从定义的 <td> 获取值 (ASP.NET MVC)

Question

我有 View ，可以通过表格显示一些数据

这是代码

 @foreach (var item in Model)
    {
        <tr >
            <td class="point">
                @(rowNo += 1)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.Email)
                @Html.Hidden("clientEmail", item.Email)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.UserName)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.Position)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.Company.CompanyName)
            </td>
            <td style="text-align: end;">


                <button type="submit" id="send" class="sendinviteclass" style="color: white">Отправить приглашение</button>

我有带有 id="send" 的按钮，我需要通过 JS 通过它获取电子邮件。

我的麻烦在于 - 例如，我可以在表中包含 5 行，因此我可以有 5 个按钮。

我如何通过 JS 从电子邮件中获取我需要的值(value)？

UPDATE

这是页面源代码

 <div style="padding-left: 70px; padding-bottom: 20px;">
            <p>
                <a href="/">
                    <img src="/images/logo.png" alt="image" height="100px" width="110px">
                </a>
            </p>
        </div>
        <div class="navbar">
            <div class="container" style="position: relative">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!--<a class="navbar-brand" href="/">Видео Интрервью</a>-->
                </div>
                <div class="navbar-collapse collapse center-block">

                    <ul class="nav navbar-nav">


                        <li><a href="/Companies">Компании</a></li>
                        <li><a href="/Interwier/Approved">Подтвержденные</a></li>
                        <li><a href="/InvitationMails/Individual">Приглашения</a></li>
                        <li><a href="/Questions/WelcomeScreen">Создать интервью</a></li>
                        <li><a href="/Interwier/Viewing">Просмотр</a></li>
                        <li><a href="/Interwier/Incoming">Входящие</a></li>
                        <li><a href="/Interwier/Archive">Архив</a></li>
                    </ul>
                    <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="6_mqaCf427P4eDczunVjASai_ZRrITyXFFtIwygRva6gR8Mr5nNZJqU8IBwTbt_HYx8bjjz81WHzLkbljebv6iALVFrIFh7N-KDi3rc6nJ_o8m3fYOsciskGTOX6stGRPop_D7qr240jQ2disCDSkg2" />        <ul class="nav navbar-nav navbar-right">
            <li>

            </li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Выйти</a></li>
        </ul>
</form>
                </div>
            </div>
        </div>
        <div class="container body-content">





<form action="/Clients/SendEmail" method="post"><form action="/Clients" method="post">    <table class="table">

        <tr style="background: #d1d3d4">
            <th></th>
            <th style="font-size: 20px; text-align: center;">
                Email
            </th >
            <th style="font-size: 20px; text-align: center;">
                Клиент
            </th>
            <th style="font-size: 20px; text-align: center;">
                Должность
            </th>
            <th style="font-size: 20px; text-align: center;">
                Компания
            </th>
         <th></th>
        </tr>
        <tr>
            <td style="height: 40px; width: 40px; background: red;">
                <a href='/Clients/Create'>
                    <img style="object-fit: cover;" src='/Images/plus.png'/>
                </a>
            </td>
        </tr>
            <tr >
                <td class="point">
                    1
                </td>
                <td class="email_text" style="text-align: center; font-size: 18px;">
                    nemesises@live.com
                    <input id="clientEmail" name="clientEmail" type="hidden" value="nemesises@live.com" />
                </td>
                <td style="text-align: center; font-size: 18px;">
                    Сухомлин Евгений
                </td>
                <td style="text-align: center; font-size: 18px;">
                    C# Developer
                </td>
                <td style="text-align: center; font-size: 18px;">
                    Фокстрот
                </td>
                <td style="text-align: end;">


                    <button type="button" onclick="sender()" data-email="nemesises@live.com" id="email"  class="sendinviteclass" style="color: white">Отправить приглашение</button>


                    <a href='/Clients/Edit/2033'>
                        <img src='/Images/Edit.png'/>
                    </a>
                    <!-- <a class="editclass" href="/Clients/Edit/2033">Редактировать</a>-->
                    <a href='/Clients/Delete/2033'>
                        <img src='/Images/Delete.png'/>
                    </a>

                </td>
            </tr>

    </table>
</form><script>
    function sender(element) {
        $(element).data('email');
        alert(email);
      }
</script>

Answer 1

将 data- prop 添加到您的按钮，例如:

<button type="submit" id="send" onclick="sender(this)" data-email="@item.email" class="sendinviteclass" style="color: white">Отправить приглашение</button>

在 JS 中:

var email = $(this).data('email')

假设this是您的按钮。