Question

我应该如何使用这段代码取回隐藏的表格：

$(".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>

Answer 1

以下列方式使用

$("#" + tblId).show();

Answer 2

您编写的代码在show变量中使用相同的值调用tblId：

$("#" + 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
    }
});

如果您这样做，您可能还想更改正在显示的图标（因此，当隐藏表格时，它会显示“显示”）。

jquery中的hide（）和show（）方法

2 个答案: