javascript - rails +jQuery : Get the Value of an Item Inside a Table to Use in a Prepend Function

Question

假设我有一张 table :

<table class="table table-bordered table-hover employes_list_panel">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th class="center">Name <i class="fa fa-angle-double-down"></i></th>
          <th class="center">IQ <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Efficiency <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Focus <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Happiness <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Quality <i class="fa fa-angle-double-down"></i></th>
          <th class="center">Salery <i class="fa fa-angle-double-down"></i></th>
        </tr>
      </thead>

      <tbody>
      <%Employe.where(company_id: company.id, request: false).each do |employe|%>
        <tr>
          <td class="center cd-popup-trigger" id="popup3"><i style="color: red;" class="fa fa-close"></i></td>
          <td class="center cd-popup-trigger" id="popup4"><i style="color: green;" class="fa fa-arrow-up"></i></td>
          <td class="center"><%=employe.name%></td>
          <td class="center"><%=employe.iq%></td>
          <td class="center"><%=employe.efficiency%></td>
          <td class="center"><%=employe.focus%></td>
          <td class="center"><%=employe.happiness%></td>
          <td class="center"><%=employe.quality.capitalize%></td>
          <td class="center"><%=employe.salery%></td>
        </tr>
      <%end%>
      </tbody>
    </table>

我想获取员工姓名的值<%=employe.name%>例如，当单击 popup3 时。请注意，列表中可以有多个“雇员”。如何获取用户单击弹出窗口所在行的员工值，以便我可以 prepend它在弹出窗口中使用 jQuery <p> .

Ex:

Click to Open Popup | Kevin |...

Click to Open Popup | Sam |...

I need to get the value Sam when I click the "second popup", the problem is all popups currently have the same id.

谢谢。

Answer 1

鉴于您的代码，popup3(和 popup4 就此而言)将在页面上出现多次(每个 tr 一次) .你需要给它一个 class，而不是 id。我个人喜欢用 js- 作为我的 JavaScript 类(不用于样式)的前缀。在您的 HTML 中:

<td class="center cd-popup-trigger js-popup3"><i style="color: red;" class="fa fa-close"></i></td>

您还需要识别包含员工姓名的单元格(稍后您会明白为什么)。

<td class="center js-employee-name"><%= employe.name %></td>

在您的 JS 代码中，您首先需要使用 js-popup3 类选择所有 td:

$('js-popup3')

然后，您希望在所选元素上发生事件时触发某些内容。使用 jQuery，您可以这样做:

$('js-popup3').on('click', function() {});

最后，您想描述事件发生时应该做什么。这是在回调函数中完成的。

$('.js-popup3').on('click', function() {
  # employeeName is the value you want
  employeeName = $(this).siblings('.js-employee-name').text();
});

我邀请您阅读大量有关 JS 的内容(首先尝试在不使用 jQuery 的情况下进行编码)。一旦您对它有信心，就开始研究 jQuery。