jquery - 如何使用jquery获取表头值

Question

我在使用 jquery 函数获取表头值时遇到问题。我有时间表模块。在视图页面中包含像 period_timing 和 weekdays 这样的表格格式。

 days   09.00AM - 10.00AM   10.00Am-11.00AM  11.00AM-12.00PM  ........

 Mon         Assign             Assign           Assign

 Tues        Assign             Assign           Assign

 Wed         Assign             Assign           Assign

 ..

在此表中，天数存储在工作日模型中，周期时间在 Period_timing 模型中。当我单击分配链接时，它显示模式窗口（弹出窗口）。其中包含 subject_id 标签。我们可以从下拉列表中选择主题。在弹出窗口中保存主题时。它在参数中发送subject_id。但我也需要 weekday_id 和 Period_timing_id 。所以，我尝试使用 jquery 获取表头值。获取 period_timing id 和 weekday_ids 是否正确。

而且我还包括编码。

在控制器中

def timetable
     @timetable_entry =   TimetableEntry.new(params[:subject_id])

    if params[:course].present?
      @timetable = CoursePeriod.where(:course_id => params[:course])

      @view = @timetable.first.period_timings

      @week = WeekdayEntry.where(:status=> true).pluck(:weekday_id)
      @first_day  = Weekday.find(@week[0]).day
      @second_day = Weekday.find(@week[1]).day
      @third_day  = Weekday.find(@week[2]).day
      @fourth_day = Weekday.find(@week[3]).day
      @fifth_day  = Weekday.find(@week[4]).day
      render :partial => "table"

  end
end



 def subject_entry  
  #raise params.inspect      
    TimetableEntry.create(:subject_id => params[:timetable_entry][:subject_id])
  end

在视图中 _table.html.erb

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
    <thead>
            <th>&nbsp;&nbsp;&nbsp;&nbsp;Days &nbsp;&nbsp;&nbsp;</th>
            <% @view.each do |i| %> 
            <th><%=i.start_time.strftime("%I:%M %p") %>--<%= i.end_time.strftime("%I:%M %p") %></th>
               <% end %>         
    </thead>
         <tbody>
                <tr>
                  <td><%= @first_day %></td>
                   <% (1..@view.count).each do |j|%>

                   <td><%= link_to "Assign","#myModal", :class => "assign", "data-toggle" => "modal" %>
                <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h3 id="myModalLabel">Timetable Entries</h3>
                  </div>

                  <div class="modal-body">
                    <%= form_for (@timetable_entry),url: subject_entry_path, method: :get do |f| %>
                    <%= f.label :subject_id %>

                    <%= f.select :subject_id, options_from_collection_for_select(Subject.all,"id", "name"),class: "display_mark",:prompt => "--Select--" %>
                    <%= f.submit "Create" %>
                    <% end %>
                  </div>

                  <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <button class="btn btn-primary">Save changes</button>
                  </div>

                </div>

               </td>
                  <% end %>
                </tr>
                <tr>
                   <td><%= @second_day %></td>
                     <% (1..@view.count).each do |j|%>
                     <td><%= link_to "Assign", "#myModal", :class => "", "data-toggle" => "modal" %></td>
                  <% end %>
                </tr>
                <tr>
                   <td><%= @third_day %></td>
                   <% (1..@view.count).each do |j|%>
                   <td><%= link_to "Assign", "#myModal", :class => "", "data-toggle" => "modal" %></td>
                  <% end %>
                </tr>
                <tr>
                   <td><%= @fourth_day %></td>
                   <% (1..@view.count).each do |j|%>
                   <td><%= link_to "Assign", "#myModal", :class => "", "data-toggle" => "modal" %></td>
                  <% end %>
                </tr>
                <tr>
                   <td><%= @fifth_day %></td>
                   <% (1..@view.count).each do |j|%>
                   <td><%= link_to "Assign", "#myModal", :class => "", "data-toggle" => "modal" %></td>
                  <% end %>
                </tr>
        </tbody>      

</table>

我尝试使用 jquery 来获取表头值。但它显示了 Days 文本。

$("body").on('click', '.assign', function(){
    var col = $(this).prevAll().length;
  var headerObj = $(this).parents('table').find('th').eq(col);
   // A quick test!
  alert("My cell header is called: " + headerObj.text());
});

请分享你的想法

Answer 1

尝试以下代码以获取相应的列标题：

$("body").on('click', '.assign', function(){
  var headerObj = $(this).parents('table').find('th').eq($(this).index());
   // A quick test!
  alert("My cell header is called: " + headerObj.text());
});

尝试下面的代码来获取星期一、星期二等天的值：

$("body").on('click', '.assign', function(){
    var headerObj = $(this).siblings('td:first-child');
   // A quick test!
  alert(headerObj.text());
});

注意：您可以使用它$(document)来代替$("body")它在 DOM 中太高。

Answer 2

尝试 var headerObj = $(this).parents('table').find('thead').find('th').eq(col);