隐藏imagecell onlick并显示其背后的单元格

Question

这就是我想要做的。我有一行单元格，我希望在页面加载时显示如下

一旦用户点击“运行状况检查”，我希望此功能显示

第一张图片中隐藏的所有数据已经​​加载并准备好显示，因此图片不需要在重新加载/显示表格行之外运行任何功能。我不确定这是否可以在javascript中完成，或者如果它需要__dopostback到代码隐藏，我会对可能有效的任何内容开放

Answer 1

我建议您使用带有值的隐藏单元格，并在点击带有链接的colspan单元格后切换可见性。

请查看以下示例：

<强> HTML：

<table id="tableExample" border="1">
  <tr>
    <th>Name</th>
    <th>Port</th>
    <th>KeyManager</th>
    <th>x</th>
    <th>y</th>
    <th>z</th>
    <th>w</th>
  </tr>
  <tr>
    <td>DSW1...</td>
    <td>8445</td>

    <td colspan="5" style="text-align: center;"><a class="health-check-button" href="#">health check</a></td>
    <td class="health-check-cell" style="display: none;">2</td>
    <td class="health-check-cell" style="display: none;">OK</td>
    <td class="health-check-cell" style="display: none;">3</td>
    <td class="health-check-cell" style="display: none;">OK</td>
    <td class="health-check-cell" style="display: none;">5</td>
  </tr>
  <tr>
    <td>DSW2...</td>
    <td>1000</td>

    <td colspan="5" style="text-align: center;"><a class="health-check-button" href="#">health check</a></td>
    <td class="health-check-cell" style="display: none;">1</td>
    <td class="health-check-cell" style="display: none;">NOK</td>
    <td class="health-check-cell" style="display: none;">A</td>
    <td class="health-check-cell" style="display: none;">OK</td>
    <td class="health-check-cell" style="display: none;">X</td>
  </tr>
</table>

<强> JavaScript的：

$(function(){
  $("#tableExample").on("click", ".health-check-button", function(e){
    var elem = e.target;
    $(elem).closest("td").css("display", "none");
    $(elem).closest("tr").children(".health-check-cell").css("display", "table-cell");
  });
});

<强> Plunker： https://plnkr.co/edit/0m9hFU2QWIq9ey12FqqG