时间戳

首页 > 解决方案 > 如何使html表格变灰并在其中显示加载器？

javascript - 如何使html表格变灰并在其中显示加载器？

问题描述

我有这个 html 表，它显示了一些关于人的数据。最后三列是对通缉犯执行某些操作的按钮。

想要的行为是当用户单击其中一个按钮以对某些用户执行操作时，表格变灰，因此用户无法单击任何其他按钮，并且加载程序显示在表格中间，直到 Ajax 响应解决，然后表恢复正常。

我的问题是如何使表格变灰以使其他按钮无法点击，并使用 javascript 在中间显示加载程序。

谢谢 ：）

标签： javascripthtmlcss

解决方案

像这样：你可以用 position: relative 元素包裹表格，并用加载微调器填充透明 div 区域。它将阻止用户单击按钮。

function action() {
  var loader = document.querySelector("#loader");
  loader.classList.remove("hidden");
  fakeCall().then(function() {
    loader.classList.add("hidden");
  }).catch(function() {
    loader.classList.add("hidden");
  });
}

function fakeCall() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(true);
    }, 1000);
  });
}
.wrapper {
  position: relative;
  display: inline-block;
}

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

.hidden {
  display: none;
}
<div class="wrapper">
<div class="loader hidden" id="loader"></div>
<table border="1" width="300" height="100">
<tr>
  <td>a</td>
  <td>b</td>
  <td><button onclick="action()">click</button></td>
</tr>
<tr>
  <td>a</td>
  <td>b</td>
  <td><button onclick="action()">click</button></td>
</tr>
</table>
</div>

推荐阅读