Question

这是我的HTML

  <table class="table table-responsive table-bordered" style="width:100%" id="HeightConfig">
    <tbody id="HeightConfigBody">
@if (Model != null)
{
@foreach (var data in Model.Reverse())
{
     <tr>
                         <td style="width:40%">
  <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
                      </td>



                       <td style="width:40%">
                         <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
                      </td>

                      <td style="width:40%">
                           <a class="btn btn-primary btn-default" title="delete"
                            data-target="#modal-container" data-toggle="modal" data-align="center">
                            <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                            </a>


     <a class="btn btn-primary btn-default" title="add"  >
                              <div id="addHeight" ><i class="fa fa-plus" aria-hidden="true"></i></div>
     </a>
                       </td>

</tr>

}
}

     </tbody>
  </table>

我需要隐藏第三列中的“加号按钮”，并且只显示在最后一行。

这就是我得到的

<script>
 debugger;
        var x = document.getElementById("HeightConfig").rows.length;
        var ctr = 1
        $("#HeightConfig tbody tr").each(function (key, value) {
            debugger;

            if (ctr != x)
            {
                $(this).find('.addHeight').hide();

            }
            ctr++;
        });
</script>

我先得到表格的长度，然后在每一行上循环，然后当计数器与表格的最后一行匹配时，它不会隐藏按钮

Answer 1

不需要所有这些（正如您猜测的那样）。： - ）

在现代浏览器中（基本上除IE8及更早版本之外的任何内容; details），您可以使用:not通过:last-of-type使用CSS执行此操作：

#HeightConfig tr:not(:last-of-type) a[title=add] {
  display: none;
}

示例：

#HeightConfig tr:not(:last-of-type) a[title=add] {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table class="table table-responsive table-bordered" style="width:100%" id="HeightConfig">
    <tbody id="HeightConfigBody">
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
    </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

否则，使用jQuery，您可以使用:not和特定于jQuery的:last：

$("#HeightConfig tr:not(:last) a[title=add]").hide();

示例：

$("#HeightConfig tr:not(:last) a[title=add]").hide();

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table class="table table-responsive table-bordered" style="width:100%" id="HeightConfig">
    <tbody id="HeightConfigBody">
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
        <tr>
            <td style="width:40%">
                <label><b>Recorded Time:</b> <input type="text" id="recordDate"  class="recordDate"   
  value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label>
            </td>



            <td style="width:40%">
                <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                          value="@data.ColumnTypeData" ></label>
            </td>

            <td style="width:40%">
                <a class="btn btn-primary btn-default" title="delete" data-target="#modal-container" data-toggle="modal" data-align="center">
                    <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div>
                </a>


                <a class="btn btn-primary btn-default" title="add">
                    <div id="addHeight"><i class="fa fa-plus" aria-hidden="true"></i></div>
                </a>
            </td>

        </tr>
    </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您可以使用简单的 CSS

解决此问题

#HeightConfig tr a[title=add] {
  display: none;
}

#HeightConfig tr:last-child a[title=add] {
  display: block;
}

或使用 jQuery

$("#HeightConfig tr a[title=add]").hide();
$("#HeightConfig tr:last-child a[title=add]").show();

根据你的评论，如果你想隐藏所有按钮，你可以简单地把：

$("#HeightConfig tr a[title=add]").hide();

或在css

#HeightConfig tr a[title=add] {
   display: none;
}

Answer 3

addHeight是div的 id 而不是类名。您可以将其命名为类名，也可以使用

 $(this).find('#addHeight').hide();

在您的代码的if条件中。

如果你想隐藏所有按钮，只需将add的类名改为add，然后使用以下行：

$('.addHeight').hide();

使用Javascript

3 个答案: