将 class 添加到 dynamic table 中当前 tr 的 td 的输入

Question

我有一个动态剔除 table，它有一个 "Qualification gained" 的复选框，勾选后我想在 traininglevelselect 的输入中添加一个 class和 trainingDateSelect（第 0 行和第 4 行）

Table -

<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 添加 classes -

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

问题-

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

我希望将 classes 添加到当前行，但复选框并非全部。

我尝试了一些类似的东西 -

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>

将 class 添加到 dynamic table 中当前 tr 的 td 的输入

Add class to the input of a td of the current tr within dynamic table

html

javascript

jquery

knockout.js