如何将表格内的表格变成colspan？

时间：2016-12-14 17:49:39

标签： jquery html html-table

我在另一个表中生成了一个表。这是通过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>

2 个答案:

答案 0 :(得分：1)

不确定你在问什么，但下面的代码在表格中找到一个表格，找到父td，并将​​colspan添加到该td。希望它有所帮助。

＆＃13;
＆＃13; 
$('table table').parent('td').attr('colspan',2);
＆＃13; 
table, tr, td {
     border: 1px solid black;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你真的需要使用colspan吗？

如果您尝试获得以下结果，我认为您的代码可能更清晰：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

实现这一目标的步骤是：

  • 手动编写表的所有标题（如果您无法通过后端Java更改您获得的代码，否则直接在那里更改它）。您可以使用Jquery执行此操作，方法是选择整个<thead>标记并在其中编写新的<tr><th>...</th><th>..</th></tr>。
  • 选择主表内的表格。循环通过它们只获得tds。用您刚提取的<table>替换整个<td>...</td>（位于主表内）。
  • 摆脱主表中不必要的<tbody>关闭和打开。
相关问题
最新问题