避免用户互动＆＃34;禁用＆＃34;表格行

Question

我有一个HTML表，其中有一些行被禁用了＃39;。我想向用户清楚地展示它，因此我将模糊过滤器应用于tr，其表格如下：

注意：https://stackblitz.com/edit/angular-cdypks上有一个实时示例。

问题在于，虽然它看起来已禁用，但用户仍然可以与它进行交互，选择文本并单击选择输入。此外，一些单元格是可以放置物体的可放置区域，所以我想避开它。

我不想使用Javascript，所以我想知道是否有办法在残疾人tr之前放置一个透明的DIV或类似的东西...

谢谢！

Answer 1

假设您的disabled财产位于tr上， 我想你可以做到以下几点：

/* Some style */
table {
  border-collapse: collapse;
  border: 1px solid gray;
}

th {
  border: 0;
  padding: 2px 20px;
}

td {
  position: relative;
  border: 1px solid gray;
  padding: 8px 20px;
}

/*
  The below adds a veil ABOVE the td elements
  that are in a tr with the "disabled" property.
  If you click, that's on the veil, not on the button
*/
#table1 tr[disabled] td::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}

/*
  This shorter one should work too:
  It disables the events of your mouse on the tds
  that are in a tr with the "disabled" property.
  (Plus, I added your blur)
*/
#table2 tr[disabled] td {
  filter: blur(1px);
  pointer-events: none;
}

<!-- Not much indentation here only to make the code of the snippet shorter -->
<table id="table1">
  <tr><th>Order</th><th>Name</th><th>Occupation</th><th>Action</th></tr>
  <tr><td>#1</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr disabled><td>#2</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr><td>#3</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
</table>
<br>
<table id="table2">
  <tr><th>Order</th><th>Name</th><th>Occupation</th><th>Action</th></tr>
  <tr><td>#1</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr disabled><td>#2</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
  <tr><td>#3</td><td>x</td><td>x</td><td><button>Button</button></td></tr>
</table>

请注意，无法单击已禁用行中的按钮。

tr[disabled] td::after在::after之后的td元素之后（使用tr伪元素）添加了面纱（使用Jun 01, 2018 5:05:39 PM org.apache.catalina.core.StandardWrapperValve invoke SEVERE: Servlet.service() for servlet [SupplierController] in context with path [/jsp-projek] threw exception java.lang.NullPointerException at eManage.controller.SupplierController.doPost(SupplierController.java:91) at javax.servlet.http.HttpServlet.service(HttpServlet.java:646) at javax.servlet.http.HttpServlet.service(HttpServlet.java:727) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:303) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208) at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:220) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:122) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:503) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:170) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:103) at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:950) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:116) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:421) at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1070) at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:611) at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:314) at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source) at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Unknown Source) 伪元素）

希望它有所帮助！

Answer 2

如果要禁用某行，可以对此行使用pointer-events: none。它可以防止你的行中出现任何鼠标事件。

tr.disabled{
  pointer-events: none;
}

Answer 3

您可以在表单控件上使用disabled属性，如此

<select disabled>

对于文字，请点击此链接：How to disable text selection highlighting?

Answer 4

arraylist

你可以试试这个， 你甚至不能用双击选择它们