Question

我有一个设计，其中一个表在另一个表中，这样如果我点击TR中的特定TD，则在该TR和下一个TR之间将出现一个新表。会发生什么，TR之后的TR（包含内部表），都不是表结构的一部分，它假设是。

这是CODE

HTML
<div class="table-responsive">
                                    <p class="t_heading">Details</p>
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                            <th>Date</th>
                                            <th>Time</th>
                                            <th>RID</th>
                                            <th>Transaction ID</th>
                                            <th>Description</th>
                                            <th>Ticket Status</th>
                                            <th>Details</th>                                                
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>23 Jan 2015</td>
                                                <td>13:00</td>
                                                <td>5221187</td>
                                                <td>000765487</td>
                                                <td>Bad Network</td>
                                                <td>Pending</td>
                                                <td><a href="#" class="ct_report_details">SHOW DETAILS</a></td>                         
                                            </tr>
                                            <tr style="display:none">
                                                <table class="table">
                                                    <thead>
                                                        <th>Date</th>
                                                        <th>Time</th>
                                                        <th>MSISDN</th>
                                                        <th>RID</th>
                                                        <th>Account</th>
                                                        <th>Operator</th>
                                                        <th>Status</th>
                                                        <th>Amount</th>
                                                        <th><a href="#" class="ct_report_details_refund">Refund</a></th>
                                                        <th><a href="#">Close</a></th>
                                                    </thead>
                                                    <tbody>
                                                        <td>3 Jan 2015</td>
                                                        <td>12:00</td>
                                                        <td>987765466</td>
                                                        <td>5111876</td>
                                                        <td>907765433</td>
                                                        <td>BSNL</td>
                                                        <td>Pending</td>
                                                        <td><i class="fa fa-inr"></i>&nbsp675546</td>
                                                        <td><a href="#" class="ct_report_details_refund">3 Jan 2015</a></td>
                                                        <td><a href="#"> Jan 2015</a></td>
                                                    </tbody>
                                                </table>
                                            </tr>
                                            <tr>
                                                <td>23 Jan 2015</td>
                                                <td>13:00</td>
                                                <td>5221187</td>
                                                <td>000765487</td>
                                                <td>Bad Network</td>
                                                <td>Pending</td>
                                                <td><a href="#" class="ct_report_details">SHOW DETAILS</a></td>                         
                                            </tr>
                                            <tr>
                                                <td>23 Jan 2015</td>
                                                <td>13:00</td>
                                                <td>5221187</td>
                                                <td>000765487</td>
                                                <td>Bad Network</td>
                                                <td>Pending</td>
                                                <td><a href="#" class="ct_report_details">SHOW DETAILS</a></td>                         
                                            </tr>                                                                                                                   
                                        </tbody>                                                                                                    
                                    </table>                                        
                                </div>

Answer 1

由于'Konok'在我的问题上发表评论，TR应该有一个TD，TD的colspan应该是7，因为父表中有7列。

_谢谢大家的支持。

<tr style="display:none">
 <td colspan="7">
  <table class="table custom-view">
  <thead>
      <th>Date</th>
      <th>Time</th>
      <th>MSISDN</th>
      <th>RID</th>
      <th>Account</th>
      <th>Operator</th>
      <th>Status</th>
      <th>Amount</th>
      <th><a href="#" class="ct_report_details_refund">Refund</a></th>
      <th><a href="#">Close</a></th>
  </thead>
  <tbody>
      <td>3 Jan 2015</td>
      <td>12:00</td>
      <td>987765466</td>
      <td>5111876</td>
      <td>907765433</td>
      <td>BSNL</td>
      <td>Pending</td>
      <td><i class="fa fa-inr"></i>&nbsp675546</td>
      <td><a href="#" class="ct_report_details_refund">3 Jan 2015</a></td>
      <td><a href="#"> Jan 2015</a></td>
  </tbody>
 </table>
</td>
</tr>

Answer 2

你必须做那样的事情：

添加名为“自定义视图

的类

<tr style="display:none">
  <table class="table custom-view">
      <thead>
          <th>Date</th>
          <th>Time</th>
          <th>MSISDN</th>
          <th>RID</th>
          <th>Account</th>
          <th>Operator</th>
          <th>Status</th>
          <th>Amount</th>
          <th><a href="#" class="ct_report_details_refund">Refund</a></th>
          <th><a href="#">Close</a></th>
      </thead>
      <tbody>
          <td>3 Jan 2015</td>
          <td>12:00</td>
          <td>987765466</td>
          <td>5111876</td>
          <td>907765433</td>
          <td>BSNL</td>
          <td>Pending</td>
          <td><i class="fa fa-inr"></i>&nbsp675546</td>
          <td><a href="#" class="ct_report_details_refund">3 Jan 2015</a></td>
          <td><a href="#"> Jan 2015</a></td>
      </tbody>
  </table>
</tr>

Javascript代码：

<script>
    $(".your-click-event").on("click", function(){
      $(".custom-view").css({ "display" : "table-cell" });
    })

</script>

表格内的HTML表格

2 个答案: