如何將桌子內的桌子變成桌子呢？

Question

我在另一個表中生成了一個表。 這是通過Java生成的（我不觸摸系統代碼）。 我的工作是為此做的。

我需要使用jQuery在colspan中將其打開。 在這里查看我的代碼：

 <table class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline" id="accounts-widget" role="grid" style="width: 100%;" width="100%" cellspacing="0" cellpadding="0" border="1">
        <thead>
            <tr color="#ccc" role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 246.75px;">Account (unit of measurement)</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 312.75px;">
                    <table cellspacing="0" cellpadding="0" border="0">
                        <tbody><tr>
                            <td colspan="2">Monthly limit</td>
                        </tr>
                        <tr>
                            <td>Notification threshold</td>
                            <td>Alert threshold</td>
                        </tr>
                    </tbody></table>
                </th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 104.75px;">Balance</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 56px;">Report</th></tr>
        </thead>




            <tbody>

      <tr role="row" class="odd">
        <td tabindex="0">Dirham (Dirham)</td>
        <td>
          <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tbody><tr>
                <td tabindex="0">0.00</td>
                <td>0.00</td>
            </tr>
          </tbody></table>
        </td>
        <td>2736761539.63</td>
        <td>
                <a href="reportParams.do?serviceId=1" class="btnlink">View</a>
         </td>
      </tr></tbody>




            <tbody>
      <tr>
        <td>SSP Extra (Litre)</td>
        <td>
          <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tbody><tr>
                <td>0.00</td>
                <td>0.00</td>
            </tr>
          </tbody></table>
        </td>
        <td>0.00</td>
        <td>
                <a href="reportParams.do?serviceId=3" class="btnlink">View</a>
         </td>
      </tr>
      </tbody>




            <tbody>
      <tr>
        <td>Service (Dinar)</td>
        <td>
          <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tbody><tr>
                <td>0.00</td>
                <td>0.00</td>
            </tr>
          </tbody></table>
        </td>
        <td>0.00</td>
        <td>
                <a href="reportParams.do?serviceId=7" class="btnlink">View</a>
         </td>
      </tr>
      </tbody>




            <tbody>
      <tr>
        <td>Beer (Litres)</td>
        <td>
          <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tbody><tr>
                <td>0.00</td>
                <td>0.00</td>
            </tr>
          </tbody></table>
        </td>
        <td>0.00</td>
        <td>
                <a href="reportParams.do?serviceId=10" class="btnlink">View</a>
         </td>
      </tr>
      </tbody>

    </table>

Answer 1

不確定您要問的是什么，但是下面的代碼在一個表中找到一個表，然后找到父td，並將​​colspan添加到該td。 希望對您有所幫助。

 $('table table').parent('td').attr('colspan',2); 

 table, tr, td { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <td> <table> <tr> <td>table 2</td> <td>table 2</td> </tr> </table> </td> <td> <td> </tr> </table> 

Answer 2

您真的需要使用colspan嗎？

我認為，如果您嘗試獲得以下結果，則代碼可能會更干凈：

 <table class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline" id="accounts-widget" role="grid" style="width: 100%;" width="100%" cellspacing="0" cellpadding="0" border="1"> <thead> <tr color="#ccc" role="row"> <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 246.75px;">Account (unit of measurement)</th> <th>Notification threshold (monthly limit)</th> <th>Alert threshold (monthly limit)</th> <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 104.75px;">Balance</th> <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 56px;">Report</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td tabindex="0">Dirham (Dirham)</td> <td tabindex="0">0.00</td> <td>0.00</td> <td>2736761539.63</td> <td> <a href="reportParams.do?serviceId=1" class="btnlink">View</a> </td> </tr> <tr> <td>SSP Extra (Litre)</td> <td>0.00</td> <td>0.00</td> <td>0.00</td> <td> <a href="reportParams.do?serviceId=3" class="btnlink">View</a> </td> </tr> <tr> <td>Service (Dinar)</td> <td>0.00</td> <td>0.00</td> <td>0.00</td> <td> <a href="reportParams.do?serviceId=7" class="btnlink">View</a> </td> </tr> <tr> <td>Beer (Litres)</td> <td>0.00</td> <td>0.00</td> <td>0.00</td> <td> <a href="reportParams.do?serviceId=10" class="btnlink">View</a> </td> </tr> </tbody> </table> 

實現該目標的步驟是：

• 手動編寫表的所有標頭（如果您無法更改通過后端Java獲取的代碼，請直接在其中進行更改）。 您可以通過選擇整個<thead>標簽並在其中寫入新的<tr><th>...</th><th>..</th></tr>來使用Jquery做到這一點。
• 選擇主表內的表。 循環通過它們，僅獲得tds。 用剛剛提取的<td>...</td>替換整個<table> （位於主表內）。
• 擺脫不必要的<tbody>關閉和打開主表中。