时间戳

首页 > 解决方案 > 使用通知覆盖多个 DIV / 单元格

jquery - 使用通知覆盖多个 DIV / 单元格

问题描述

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

<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”标签保持可见，但在 4 个包含错误或警告的数据单元格上放置一个 div（或类似的）信息。

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

1）它涵盖了整行（包括行的标题，例如：在这种情况下为描述2）。

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

关于如何实现我想要实现的目标的任何想法或建议？

谢谢！

标签： jqueryhtmlcss

解决方案

编辑：我改变了解决方案。您可以使用.hide()and .show()from jQuery 来实现这一点。

$(".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>

推荐阅读