Question

我遇到使用jquery函数获取表头值的问题。我有时间表module.in，视图页面包含像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标签。我们可以从下拉列表中选择主题。在弹出窗口中保存主题。在params中发送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

在View _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());
});

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

Answer 2

尝试var headerObj = $（this）.parents（'table'）。find（'thead'）。find（'th'）。eq（col）;

如何使用jquery获取表头值

2 个答案: