日期:2014-05-16  浏览次数:20360 次

怎么用jquery实现这个点击隐藏和显示呢?传递自定义参数
HTML code


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready( function() {
    var child = $("p.trace-show").prop("table-child");
    alert("child");


}); 
</script>
<style>
.ui-table {width:950px; text-align: center; margin:auto 0;}
.ui-table thead {background: #ca000a; font-weight: bold;  color: white; height:30px;}
.ui-table thead tr th{font-size: 12px; height: 30px; line-height:25px;}
.ui-table tbody tr td{font-size: 12px; color: #333; line-height: 200%; background: #e2e2e2}

.ui-table-child {width:100%; text-align: center;}
.ui-table-child thead {background: #e2e2e2; font-size: 12px; font-weight: bold; color: #333; line-height: 200%;}
.ui-table-child thead tr th{font-size: 12px; height: 20px; line-height:18px;}
</style>
<table class="ui-table" border="0" cellspacing="3" cellpadding="0">
    <thead>
        <tr>
            <th class="waybills"><strong>运单编号</strong></th>
            <th class="dete"><strong>日期</strong></th>
            <th class="time"><strong>时间</strong></th>
            <th class="staus"><strong>快件状态</strong></th>
            <th class="now"><strong>当前地点</strong></th>
            <th class="express"><strong>转运商</strong></th>
            <th class="express_no"><strong>转运单号</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="waybills">2012040000000</td>
            <td class="dete">12-04-29</td>
            <td class="time">00:24</td>
            <td class="staus">从广州发往深圳途中</td>
            <td class="now">广州</td>
            <td class="express">海运</td>
            <td class="express_no">200516140336</td>
        </tr>
        <tr>
            <td><p class="trace-show" table-child="bill2012040000000">历史状态</p></td>
            <td colspan="6" align="center" style="background:#FFF;"><font color="red"><p>以上结果供参考,如有需要,欢迎垂询中国大陆服务热线4008 111 111或咨询在线客服。</p></font></td>
        </tr>
        <tr id="bill2012040000000" width="100%" style="display:none">
            <td colspan="7" style="background:#FFF;" align="center">
                <table class="ui-table-child" width="100%" border="0" cellspacing="3" cellpadding="0">
                    <thead>
                        <tr>
                            <th class="waybills"><strong>运单编号</strong></th>
                            <th class="dete"><strong>日期</strong></th>
                            <th class="time"><strong>时间</strong></th>
                            <th class="staus"><strong>快件状态</strong></th>
                            <th class="now"><strong>当前地点</strong></th>
                            <th class="express"><strong>转运商</strong></th>
                            <th class="express_no"><st