Rails+jQuery：获取 Table 中某项的值以在前置函数中使用

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>

我想在单击 popup3 时获取员工姓名 <%=employe.name%> 的值。请注意，列表中可以有多个 "employe"。我怎样才能获得用户单击弹出窗口所在行上的雇员的值，以便我可以 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

您可以为 Table tr 创建点击函数并获取第三列（索引 2）的值：

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

Answer 2

要使弹出窗口具有根据员工的唯一 ID，请尝试如下操作： ">

然后我假设你有一些 js 来处理弹出点击。这个js可以用

提取员工id

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

Answer 3

根据您的代码，popup3（和 popup4 就此而言）将在页面上多次出现（每个 tr 出现一次）。您需要给它 class，而不是 id。我个人喜欢在我的 JavaScript classes（不用于样式）前加上 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 代码中，您首先需要 select 所有 td 和 js-popup3 class:

$('js-popup3')

然后，您想在您 select 编辑的元素上发生事件时触发某些内容。使用 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。

Rails+jQuery：获取 Table 中某项的值以在前置函数中使用

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

javascript

jquery

ruby-on-rails

popup