jquery中的Hide()和show()方法
hide() and show() methods in jquery
如何使用这段代码获取隐藏的表:
$(".glyphicon-remove").click(function () {
var tblId = $(this).parent().attr("id");
// alert(tblId);
var ans = confirm("Are you sure you want to remove this table?");
if(ans == true)
$("#" + tblId).hide();
//else exit();
});
的HTML内容为:
<li class="ui-state-default" id="first"><span style="float:right;"class="glyphicon glyphicon-remove"></span><br/>
<table class="rounded-corner">
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Details</th>
<th>Price</th>
<th>Date</th>
<th>Category</th>
<th>User</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<td><input type="checkbox" name="" /></td>
<td>Box Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Alex</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
</tr>
<tr class="even">
<td><input type="checkbox" name="" /></td>
<td>Trial Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>155$</td>
<td>12/04/2011</td>
<td>web design</td>
<td>Carrina</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
</tr>
<tr class="odd">
<td><input type="checkbox" name="" /></td>
<td>Hosting Pack</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Alex</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
<tr class="even">
<td><input type="checkbox" name="" /></td>
<td>Duo Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>745$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Alex</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
<tr class="odd">
<td><input type="checkbox" name="" /></td>
<td>Alavasti Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>John</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
<tr class="even">
<td><input type="checkbox" name="" /></td>
<td>Box Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Doe</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
</tbody>
</table>
</li>
<!------------------------------------------------------------------------------------------------------------------------------->
<li class="ui-state-default" id="second"><span style="float:right;"class="glyphicon glyphicon-remove"></span><br/>
<table class="rounded-corner">
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Details</th>
<th>Price</th>
<th>Date</th>
<th>Category</th>
<th>User</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<td><input type="checkbox" name="" /></td>
<td>Box Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Alex</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
</tr>
<tr class="even">
<td><input type="checkbox" name="" /></td>
<td>Trial Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>155$</td>
<td>12/04/2011</td>
<td>web design</td>
<td>Carrina</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
</tr>
<tr class="odd">
<td><input type="checkbox" name="" /></td>
<td>Hosting Pack</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Alex</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
<tr class="even">
<td><input type="checkbox" name="" /></td>
<td>Duo Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>745$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Alex</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
<tr class="odd">
<td><input type="checkbox" name="" /></td>
<td>Alavasti Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>John</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
<tr class="even">
<td><input type="checkbox" name="" /></td>
<td>Box Software</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td>45$</td>
<td>10/04/2011</td>
<td>web design</td>
<td>Doe</td>
<td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
<td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
</tr>
</tbody>
</table>
</li>
按下列方式使用
$("#" + tblId).show();
您编写的代码在tblId变量中使用相同的值调用show:
$("#" + tblId).show();
如何调用代码取决于您;显然，由于表是隐藏的，它必须通过表本身之外的某个元素来访问。
如果我正确阅读你的HTML，图标"删除"(隐藏)表是在表之外，所以你可以改变你的处理程序:
$(".glyphicon-remove").click(function () {
var tblId, tbl, ans;
tblId = $(this).parent().attr("id");
tbl = $("#" + tblId);
if (tbl.is(":visible")) {
// It's showing
ans = confirm("Are you sure you want to hide this table?");
} else {
// It's not showing
ans = confirm("Are you sure you want to show this table?");
}
// alert(tblId);
if(ans) {
tbl.toggle(); // toggle hides or shows, depending
}
});
如果您这样做了，您可能还想更改正在显示的图标(因此，当表被隐藏时，它建议使用"show")。
相关文章：
- electronic BrowserWindow的最小高度和宽度在hide(）show(）方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 打破承诺链的好方法是什么
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 使用“;这个“;JavaScript原型方法中的关键字
- 序列化数据属性中对象的最可靠方法
- 使用Objective-C的JavaScript注入方法
- 有没有一种方法可以添加相同的项目val＝“0”;4〃;到JavaScript中数组的每个对象
- 有没有更好的方法来编写这个Show/hide JQuery代码
- 将$ionicLoading.show(）用于外部链接的方法
- 如果我使用 jQuery 的 .hide(） 和 .show(） 方法，如何将 javascript 验证仅应用于 HT
- 使用“破解”打开跨域URL的方法;window.show”;Javascript
- Show()方法从dom中删除HTML元素，而不是显示它
- 不能在事件处理程序(jquery)中传递show()方法
- jQuery的appear()和show()方法的区别
- 当类选择器返回2个元素时，使用hide(）和show(）方法
- jQuery show(）方法在Chrome和IE浏览器上不起作用
- jquery中的Hide()和show()方法
- 在Jquery中不能执行show()方法
