Rails+jQuery:获取表中项的值，以便在Prepend函数中使用

Question

假设我有一张桌子

<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将其用于弹出<p>中。

例如： 点击打开弹出窗口凯文..。 点击打开弹出框..。 当我点击“第二个弹出窗口”时，我需要得到值Sam，问题是所有弹出窗口当前都有相同的id。

谢谢你。

Answer 1

考虑到您的代码，popup3 (和popup4 )将多次出现在页面上(每个tr一次)。您需要给它一个class，而不是id。我个人喜欢用js-作为我的js-类的前缀(不用于样式设置)。在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代码中，首先需要选择带有td类的所有js-popup3：

$('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。

Answer 2

您可以为表tr创建一个单击函数，并获得第三列(索引2)的值：

$('table.reference.notranslate tbody').delegate("tr", "click", function(){
       var YourEmployeName = $(this).find('td').eq(2).text();
       alert(YourEmployeName);
    });

Answer 3

要使弹出窗口具有唯一的id，请根据员工的要求尝试如下所示：">

那么我想你应该有一些js来处理弹出点击。这个js可以用

emp_id = my_clicked_popup_trigger.attr("id").split('-')[-1]