Question

我的html页面中有7个按钮，

这些按钮代表此图片中的天数：

我正在使用只显示特定日期按钮的javascript函数（在我的情况下：图表上具有空值的日期）...

然而，当按钮被隐藏时，我会丢失其余按钮的正确位置（我应该拥有）..就像在这张图片中一样：

我希望按钮保持正确的位置。我想要的是这样的：

这是我的Html代码：

   <div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">   <table class="graph-actions">
        <tr>
          <td id="graph-edit0" class="btn hidden" style="width: 14%">btn 1</td>
          <td id="graph-edit1" class="btn hidden" style="width: 14%">btn 2</td>
          <td id="graph-edit2" class="btn hidden" style="width: 14%">btn 3</td>
          <td id="graph-edit3" class="btn hidden" style="width: 14%">btn 4</td>
          <td id="graph-edit4" class="btn hidden" style="width: 14%">btn 5</td>
          <td id="graph-edit5" class="btn hidden" style="width: 14%">btn 6</td>
          <td id="graph-edit6" class="btn hidden" style="width: 14%">btn 7</td>
        </tr>       </table>  </div>

Answer 1

如果CSS中的.hidden确实

display:none;

它会将剩余的单元格折叠到可用空间。相反，尝试：

td.hidden{
    display: table-cell; /* reset the .hidden */
    visibility: hidden;  /* use visibility instead*/
}

https://developer.mozilla.org/en/docs/Web/CSS/visibility
以下是演示：

.hidden{
  display:none;
}
/* the above is from Bootstrap? OK, let's keep it.*/

/* Now let's fix it instead for the TD elements: */
td.hidden{
  display: table-cell;
  visibility:hidden;
}

<div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">
  <table class="graph-actions">
    <tr>
      <td id="graph-edit0" class="btn hidden" style="width: 14%">btn 1</td>
      <td id="graph-edit1" class="btn hidden" style="width: 14%">btn 2</td>
      <td id="graph-edit2" class="btn" style="width: 14%">btn 3</td>
      <td id="graph-edit3" class="btn hidden" style="width: 14%">btn 4</td>
      <td id="graph-edit4" class="btn" style="width: 14%">btn 5</td>
      <td id="graph-edit5" class="btn" style="width: 14%">btn 6</td>
      <td id="graph-edit6" class="btn hidden" style="width: 14%">btn 7</td>
    </tr>
  </table>
</div>

Answer 2

经过修正后，总结一下这里是回复：

我编辑我的代码如下：

<div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">
    <table class="graph-actions" style="width:100%">
        <tr>
            <td id="graph-edit0" class="btn " style="width: 14%;visibility: hidden">btn 1</td>
            <td id="graph-edit1" class="btn " style="width: 14%;visibility: hidden">btn 2</td>
            <td id="graph-edit2" class="btn " style="width: 14%;visibility: hidden">btn 3</td>
            <td id="graph-edit3" class="btn " style="width: 14%;visibility: hidden">btn 4</td>
            <td id="graph-edit4" class="btn " style="width: 14%;visibility: hidden">btn 5</td>
            <td id="graph-edit5" class="btn " style="width: 14%;visibility: hidden">btn 6</td>
            <td id="graph-edit6" class="btn " style="width: 14%;visibility: hidden">btn 7</td>
        </tr>
    </table> </div>

我使用JQuery函数编辑给定按钮的css，如下所示：

$.each( indexesNullValue(data),function( index, value ){
        $("#graph-edit"+value).css("visibility","visible");
    });

谢谢大家：）

在正确的位置显示按钮

2 个答案: