javascript - 如何在选择/取消选择该行的复选框时在表格单元格内添加或删除值，尝试通过 Jquery 提交值？

Question

这是表格：

<%= form_tag '', :id => "costs" do %>
<table class="table table-bordered" id="service_cost">
    <% @services.each do |service|  %>
    <tbody>
        <tr>
            <td><%= check_box_tag :open_service,  {}, false, :class => 'checkable' %></td>  
            <td><%= service.phone %></td>
            <td><%= service.internet %></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td><%= service.house_keeping  %> </td>
            <td>0.0 </td>
            <td><%= service.laundry %></td>
            <td><%= text_field_tag "service_cost", service.total, :class => "input-small" %></td>
        </tr>
    </tbody>
    <% end %>
</table>
<% end %>

当表单被提交时，javascript 开始起作用：

$("#costs").submit(function(){
  formData=$("#costs").serializeArray();
  processFormData(formData)
  return false;
});

这可确保在选中复选框时提交表单：

$('.checkable').live('change', function() {
  $(this).parents('form:first').submit();
});

但是，我正在寻找的是基于复选框选择/取消选择添加或删除单元格值并提交它，请提出一种方法来做到这一点。

Answer 1

如果表有多行，但如果它执行以下操作，则不确定 hide 是否适用于 td：

<table>
    <tr>
        <td class="data">data</td>
        <td><input type="checkbox" class="checkable" value="data"></td>
    </tr>
</table

$('.checkable').live('change', function() {
      $(this).closest('tr.data').hide();
      $(this).parents('form:first').submit();

});

Answer 2

<%= check_box_tag :check %>
<%= form_tag '', :id => "costs" do %>
  <%= text_field_tag, :detbycb, :size=>20 %>
<% end %>

$('#check').on('change', function() {
   if ( $('#check').is(':checked') )
      $('#detbycb').val('I Am Checked');
   else
      $('#detbycb').val('I AM NOT checked');
}

OR

$('#check').on('change', function() {
   if ( $(this).is(':checked') )
      $('#detbycb').val('I Am Checked');
   else
      $('#detbycb').val('I AM NOT checked');
}

The first better illustrates,  the second is the real way, faster execution