Question

我有一个动态的淘汰赛表，当勾选此复选框时，该复选框具有“资格获得”复选框，我想向traininglevelselect和trainingDateSelect的输入中添加一个类（行0和4））

表格-

<tbody data-bind="foreach: TrainingItems" id="trainingPadding" class="tdPadding">
<tr>
    <td class="col-md-1">@Html.DropDownList("Train Level", EnumHelper.GetSelectList(typeof(TrainingLevel)), new { @class = "form-control site-level-ddl trainingLevelSelect", data_bind = "value: TrainLevel" })</td>
    <td class="col-md-2"><input type="text" data-bind="value: TrainCourseTitle" class="form-control" /></td>
    <td class="col-md-2"><input type="text" data-bind="value: TrainProviderName" class="form-control" /></td>
    <td class="col-md-1"><input type="text" data-bind="date: TrainDateStarted" class="form-control datepicker" placeholder="dd/mm/yyyy" id="datepicker2" /></td>
    <td class="col-md-1"><input type="text" data-bind="date: TrainDateCompleted" class="form-control trainingDateSelect datepicker hasDatepicker"  placeholder="dd/mm/yyyy" /></td>
    <td class="col-md-1"><input type="text" data-bind="value: TrainHoursAttended" class="form-control" onkeyup="calculateTrainingCost()" /></td>
    <td class="col-md-1"><input type="text" id="trainCost" data-val="true" data-val-required="Please enter a cost" data-bind="value: TrainCost" class="form-control trainingCost" onkeyup="calculateTrainingCost(), calculateOverallTotal()" /></td>
    <td class="col-md-1" style="text-align: center"><input type="checkbox" data-bind="checked: QualificationGained" class="" onchange="addClass()"/></td>
    <td class="col-md-1" style="width: 4%; text-align: center"><a href="#" data-bind="click: $root.removeTrainingRow" class="glyphicon glyphicon-trash text-danger" /></td>
</tr>
</tbody>

为此，我目前正在使用jQuery添加类-

$('.trainingDateSelect').addClass('trainingDateCompleted');
$('.trainingLevelSelect').addClass('trainingLevel');

问题-

如果我只添加一行，这很好用。动态添加第二行并单击复选框会将类添加到这两行。

我希望仅将类添加到当前行中，而不是全部选中该复选框。

我已经尝试过-

function addClass(){   
  $(this).closest('tr').children('input:eq(4)').addClass('trainingDateCompleted');
}

单击该复选框时会触发，但是不起作用。

Answer 1

代码中的on change事件中使用的函数名称不匹配：

将此 this 传递给函数，以便您可以在函数内部引用它。您可以在最接近的tr上使用find()，如下所示：

function addClass(el){   
 $(el).closest('tr').find('input:eq(4)').addClass('trainingDateCompleted');
}

function calculateTrainingCost(){}

.trainingDateCompleted{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody data-bind="foreach: TrainingItems" id="trainingPadding" class="tdPadding">
    <tr>
      <td class="col-md-1">test</td>
      <td class="col-md-2"><input type="text" data-bind="value: TrainCourseTitle" class="form-control" /></td>
      <td class="col-md-2"><input type="text" data-bind="value: TrainProviderName" class="form-control" /></td>
      <td class="col-md-1"><input type="text" data-bind="date: TrainDateStarted" class="form-control datepicker" placeholder="dd/mm/yyyy" id="datepicker2" /></td>
      <td class="col-md-1"><input type="text" data-bind="date: TrainDateCompleted" class="form-control trainingDateSelect datepicker hasDatepicker"  placeholder="dd/mm/yyyy" /></td>
      <td class="col-md-1"><input type="text" data-bind="value: TrainHoursAttended" class="form-control" onkeyup="calculateTrainingCost()" /></td>
      <td class="col-md-1"><input type="text" id="trainCost" data-val="true" data-val-required="Please enter a cost" data-bind="value: TrainCost" class="form-control trainingCost" onkeyup="calculateTrainingCost(), calculateOverallTotal()" /></td>
      <td class="col-md-1" style="text-align: center"><input type="checkbox" data-bind="checked: QualificationGained" class="" onchange="addClass(this)"/></td>
      <td class="col-md-1" style="width: 4%; text-align: center"><a href="#" data-bind="click: $root.removeTrainingRow" class="glyphicon glyphicon-trash text-danger" /></td>
    </tr>
  </tbody>
</table>

将类添加到动态表中当前tr的td的输入中

1 个答案: