jQuery - 如何在表格中导航并删除属性，

Question

如果 Ajax 调用成功，我有一个表，其中一行设置为特定背景色。我需要能够在下一个 Ajax 操作中清除背景颜色，因此只有更新的最后一行设置了背景。使用 jQuery 的示例表格行:

$(document).ready(function() {
  $('.update-allocation').click(function(event) {
    var $row = $(this).parents('tr');
    var desc = $row.find('input[name="item.Description"]').val();
    var gift = $row.find('input[name="item.GiftAidable"]').is(':checked');
    var isActive = $row.find('input[name="item.IsActive"]').is(':checked');

    $row.closest('table').children('td').removeAttr("background-color")
    $row.parent().find('td').removeAttr("background-color")

    $row.children().css({
      "background-color": "green"
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input id="item_AllocationId" name="item.AllocationId" type="hidden" value="3">
      <input class="form-control input-width-medium text-box single-line" data-val="true" data-val-required="The Description field is required." id="item_Description" name="item.Description" type="text" value="Donation Box">
    </td>
    <td>
      <div class="checker" id="uniform-item_GiftAidable"><span class="checked"><input checked="checked" class="uniform checkbox" id="item_GiftAidable" name="item.GiftAidable" type="checkbox" value="true"></span>

      </div>
      <input name="item.GiftAidable" type="hidden" value="false">
    </td>
    <td>
      <div class="checker" id="uniform-isActive"><span class="checked"><input checked="checked" class="uniform checkbox" id="isActive" name="item.IsActive" type="checkbox" value="true"></span>

      </div>
      <input name="item.IsActive" type="hidden" value="false">
    </td>
    <td>
      <input class="update-allocation" type="submit" name="update-allocation" value="Update" />
    </td>
  </tr>
</table>

然后在这里摆弄JSFiddle

Answer 1

$(document).ready(function () {
    $('.update-allocation').click(function (event) {
        var $row = $(this).parents('tr');
        var desc = $row.find('input[name="item.Description"]').val();
        var gift = $row.find('input[name="item.GiftAidable"]').is(':checked');
        var isActive = $row.find('input[name="item.IsActive"]').is(':checked');

        $row.closest('table').find('td').css({'background-color': 'inherit'})

        $row.children().css({"background-color":"green"});
        //alert('description: ' + desc + '\ngift aidable: ' + gift + '\nis active: '+isActive);
    });
});

应该做的事

https://jsfiddle.net/owoze110/8/

我建议为这项工作使用类。

将类添加到事件行并使用 css 规则设置 background-color