Question

我有一个现有的引导网格/表数据布局，如下所示：

<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会返回整个行有错误，因此我希望能够通过将消息有效地放在行的整个数据部分上来标记与该行有关的错误。

例如，假设“描述2”数据是错误的，那么我希望“描述2”标签保持可见，但要将div（或类似值）放置在包含一个“错误或警告消息。

此刻，我正在有问题的“ 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>

通知覆盖多个DIV /单元

1 个答案: