Question

我使用Bootstrap和PHP创建了一个简单的表，如下所示：

<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th scope="col">Name</th>
    <th scope="col">Date</th>
    <th scope="col">Select</th>
  </thead>
  <tbody>

    <tr id="RFIT1000">
      <td>Penny Lane</td>
      <td>10/03/2015</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
        <button type="button" class="btn btn-danger btn-sm">No</button>
      </td>
    </tr>
    <tr id="RFIT1001">
      <td>Fred Kruger</td>
      <td>18/01/2016</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
        <button type="button" class="btn btn-danger btn-sm">No</button>
      </td>
    </tr>
    <tr id="RFIT1002">
      <td>Bob Hope</td>
      <td>09/08/2016</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
        <button type="button" class="btn btn-danger btn-sm">No</button>
      </td>
    </tr>
  </tbody>
</table>

这是将要提交的表单的一部分，我需要跟踪哪些行被选中是和哪些行被选中。否。我还想在单击是时向表行添加.success类（和删除一个.danger类（如果以前存在），当单击否时添加一个。表格行的危险等级（如果先前存在，则移除。成功类）。

如果用户单击是，我想以某种方式跟踪变量/数组中的行的id值，并且对于No选择也是如此。如果用户更改了选择，它还应该从原始变量/数组中删除该值 - 例如如果他们第一次点击否，然后他们点击是，它应该将值添加到'是'变量/数组列表，并将其从'否'变量/数组列表中删除。

我还在学习HTML，Javascript和CSS，所以我不知道这里最好的方法是什么，以及如何实现一个跟踪选择的系统，并将那些可用的POST值包含在表单提交中？

Answer 1

尝试使用此

var store={};
//store all values of succes fauilure in an object coresponding to the id 
$("[id^=RFIT]").each(function(e,i){store[i.id]=$(i).hasClass('success')?'success':'danger'});


//on click update the closest tr class and store
$('button').click(function(){
    if($(this).hasClass('btn-success')){
        result='success';
    }else{
        result='danger';
    }
    $(this).closest('tr').attr('class',result);
   store[ $(this).closest('tr').attr('id')]=result;
});

Answer 2

<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th scope="col">Name</th>
    <th scope="col">Date</th>
    <th scope="col">Select</th>
  </thead>
  <tbody>

    <tr id="RFIT1000">
      <td>Penny Lane</td>
      <td>10/03/2015</td>
      <td colspan="2">
        <label><input name="row1" id="row1Y" type="radio" class="btn btn-success btn-sm">Yes</label>
        <label><input name="row1" id="row1N" type="radio" class="btn btn-danger btn-sm">No</label>
      </td>
    </tr>
    
    <tr id="RFIT1001">
      <td>Fred Kruger</td>
      <td>18/01/2016</td>
      <td colspan="2">
        <label><input name="row2" id="row2Y" type="radio" class="btn btn-success btn-sm">Yes</label>
        <label><input name="row2" id="row2N" type="radio" class="btn btn-danger btn-sm">No</label>
      </td>
    </tr>
    <tr id="RFIT1002">
      <td>Bob Hope</td>
      <td>09/08/2016</td>
      <td colspan="2">
        <label><input name="row3" id="row3Y" type="radio" class="btn btn-success btn-sm">Yes</label>
        <label><input name="row3" id="row3N" type="radio" class="btn btn-danger btn-sm">No</label>
      </td>
    </tr>
  </tbody>
</table>

您可以使用单选按钮获取用户响应，也可以使用可以在运行时更改行类的那些单选按钮来捕获java脚本中的事件。希望它会对你有所帮助，如果有任何疑问，我仍然会提供java脚本代码。我在同一行中使用了同名的单选按钮来读取PHP中的输入和不同的id来处理java脚本中的不同事件。

HTML表格 - 表单提交的跟踪选择

2 个答案: