[英]Hide the button in the last row of the table using Javascript
这是我的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>
我首先得到表的长度,然后在每一行上循环,然后当计数器与表的最后一行匹配时,它不会隐藏按钮
不需要所有这些(您猜到了)。 :-)
在现代浏览器中(基本上是IE8和更早版本; 细节 ),您可以通过:not
与:last-of-type
一起使用CSS来:last-of-type
:
#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>
您可以使用简单的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;
}
addHeight是div的ID ,而不是类名。 您可以将其设为类名或使用
$(this).find('#addHeight').hide();
在代码的if条件中。
如果要隐藏所有按钮,只需将addheight设置为div的类名称,然后使用以下行:
$('.addHeight').hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.