连续使用CSS删除所有信息（包括图像）

Question

我需要使用css删除一行中的所有信息...这是我的输入

目前我用这个css来改变颜色 - 让它说它被禁用了。

table.answer tr.disabled td{
    color:#eee !important;
    background:#f9f9f9 !important;
    border-color:#ccc !important;
}
table.answer tr.disabled td.last{
    color:#333 !important;
    background:#f9f9f9 !important;
    border-color:#ccc !important;
}

我使用了jquery - 将disabled类添加到表格中的tr。

假设用户点击ignore按钮时会运行此功能。

$('#row_'+id).addClass('disabled');

我的要求是，如果用户点击标有忽略的按钮图片，那么该行的所有信息都将如下所示：

在此之前，我只是改变了颜色......但它只适用于字体而不是图像...

Answer 1

您可以将样式应用于:before :after类的disabled或tr。但是我发现这会在行的开头或结尾添加一个小边框。

table,
tr,
td {
  border-collapse: collapse;
}
tr,
td {
  border: 1px solid #ccc;
}
.disabled:after {
  position: absolute;
  top: 15px;
  left: 18px;
  content: '';
  width: 95%;
  height: 3px;
  border: none;
  border-bottom: 1px solid black;
}

<table style="width: 100%;">
  <tr class="disabled">
    <td>C</td>
    <td style="width: 50%;">Content</td>
    <td>Ignore</td>
  </tr>
</table>

我很快就会在这里添加一个jQuery替代方案。

修改

这是一个jQuery解决方案，可以删除行尾的奇怪边框。我使用容器<div>来应用删除线而不是实际的表本身。

<强> Fiddle

$('.disabled').each(function() {

  var me = $(this),
    s = $('.strikeout'),
    d = $('<div></div>'),
    p = me.position(),
    h = me.height();

  d.addClass('disabled-div').css('top', 8 + p.top);
  s.append(d);

});

table,
tr,
td {
  border-collapse: collapse;
}
tr,
td {
  border: 1px solid #ccc;
}
.strikeout {
  position: relative;
}
.disabled1:after {
  position: absolute;
  left: 18px;
  content: '';
  width: 95%;
  height: 3px;
  border: none;
  border-bottom: 1px solid black;
}
.disabled-div {
  position: absolute;
  top: 15px;
  left: 18px;
  width: 95%;
  height: 3px;
  content: '';
  border-bottom: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="strikeout">
  <table style="width: 100%;">
    <tr class="disabled">
      <td>123</td>
      <td style="width: 50%;">321</td>
      <td>Ignore</td>
    </tr>
    <tr class="disabled">
      <td>123</td>
      <td style="width: 50%;">321</td>
      <td>Ignore</td>
    </tr>
    <tr>
      <td>123</td>
      <td style="width: 50%;">321</td>
      <td>Ignore</td>
    </tr>
  </table>
</div>