jquery - 用通知覆盖多个 DIV/Cells

Question

我有一个现有的 Bootstrap 网格/表格数据布局，如下所示:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row row-striped">
  <div class="col-sm-4 result-label"></div>
  <div class="col-sm-2 result-value">First</div>
  <div class="col-sm-2 result-value">Second</div>
  <div class="col-sm-2 result-value">Third</div>
  <div class="col-sm-2 result-value">Fourth</div>
</div>
<div class="row row-striped">
  <div class="col-sm-4 result-label">Description 1</div>
  <div class="col-sm-2 result-value">10</div>
  <div class="col-sm-2 result-value">11</div>
  <div class="col-sm-2 result-value">12</div>
  <div class="col-sm-2 result-value">13</div>
</div>
<div class="row row-striped">
  <div class="col-sm-4 result-label">Description 2</div>
  <div class="col-sm-2 result-value">14</div>
  <div class="col-sm-2 result-value">15</div>
  <div class="col-sm-2 result-value">16</div>
  <div class="col-sm-2 result-value">17</div>
</div>

数据正在通过 ajax 调用动态填充。但是，有时 ajax 会返回整行错误，因此我希望能够通过有效地将消息放在行的整个数据部分上来标记与该行有关的错误。

例如，假设“Description 2”数据有误，那么我希望“Description 2”标签保持可见，但要在 4 个包含错误或警告消息。

目前，我在有问题的“col-sm-4”之后插入了一个 DIV，这是可行的。但是，它有两个问题:

1) 它覆盖了整行(包括行的标题，例如:本例中的描述 2)。

2) 我无法让错误 DIV 填充行本身的整个高度。

关于如何实现我想要实现的目标有什么想法或建议吗？

谢谢!

Answer 1

编辑:我更改了解决方案。您可以使用 jQuery 中的 .hide() 和 .show() 来实现这一点。

$(".error-2").hide();

$(".showError").click(() => {
  $(".result-value-2").hide();
  $(".error-2").show();
  
});

$(".hideError").click(() => {
  $(".result-value-2").show();
  $(".error-2").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-striped">
  <div class="col-4 result-label"></div>
  <div class="col-2 result-value">First</div>
  <div class="col-2 result-value">Second</div>
  <div class="col-2 result-value">Third</div>
  <div class="col-2 result-value">Fourth</div>
</div>
<div class="row row-striped">
  <div class="col-4 result-label-1">Description 1</div>
  <div class="col-2 result-value-1">10</div>
  <div class="col-2 result-value-1">11</div>
  <div class="col-2 result-value-1">12</div>
  <div class="col-2 result-value-1">13</div>
</div>
<div class="row row-striped">
  <div class="col-4 result-label-2">Description 2</div>
  <div class="col-2 result-value-2">14</div>
  <div class="col-2 result-value-2">15</div>
  <div class="col-2 result-value-2">16</div>
  <div class="col-2 result-value-2">17</div>
  <div class="col text-center error-2">Error</div>
</div>

<button class="showError">Show Error</button>
<button class="hideError">Hide Error</button>