Question

在下面的代码中，它基本上是动态地添加一个新表，即使它工作正常，我有一个问题，列的宽度有内容＆＃34; +＆＃34;不要自动增加此列的宽度。我不介意其他列宽度是否增加但是＃34; +＆＃34;内容td应保持不变。

代码：

<html>
<head>
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
 <style>
.table_main {
        border-top-style: ridge;
        border-bottom-style: ridge;
        border-left-style: ridge;
        border-right-style: ridge;
        border-color: red;
        border-width: 3px;
      }

.table_main td {
    background: #A38055;    
    border-right: solid 1px white ;
    border-bottom: 1px solid white;
    text-align: center;
}

.table_main th {
    background: #DCDCDC;
    border-right: solid 1px white ;
    border-bottom: 1px solid white;
    text-align: center;
}

  </style>

</head>
<body>
<table class="table_main">
    <tbody>
        <tr>
        <td>Big</td>
            <td width="5%">
            Sl
            </td>
            <td>
            Label 1
            </td>
            <td>
            Label 1
            </td>
            <td>
            Label 1
            </td>
            <td>
            Label 1
            </td>
        </tr>
        <tr >
        <td rowspan="5">
        Data1:<b/>

        </td>
        </tr>
        <tr>
            <td width="5%"></td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
        </tr>
        <tr id="rowId">
            <td width="5%"  onclick="loadSubData()">+</td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
        </tr>
        <tr>
            <td width="5%"></td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
        </tr>
        <tr>
            <td width="5%"></td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
            <td>Some data1</td>
        </tr>
    </tbody>
<table>
<script type="text/javascript">
function loadSubData(){
if($('#dataNode').length <= 0){
$('#rowId').after('<tr id="dataNode"><td width="5%;">h</td><td colspan="4"><table class="table_main">   <tbody>         <tr>        <td>Big</td>            <td width="5%">             Sl          </td>           <td>            Label 1             </td>           <td>            Label 1             </td>           <td>            Label 1             </td>           <td>            Label 1             </td>       </tr>       <tr >       <td rowspan="5">        Data1:<b/>              </td>       </tr>       <tr>            <td width="5%"></td>            <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>       <tr id="rowId">             <td width="5%"  onclick="loadSubDatalevel()">+</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>       <tr>            <td width="5%"></td>            <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>       <tr>            <td width="5%"></td>            <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>   </tbody> <table></td></tr>');
}
}
function loadSubDatalevel(){
if($('#dataNode2').length <= 0){
$('#rowId').after('<tr id="dataNode2"><td width="5%;">h</td><td colspan="4"><table class="table_main">  <tbody>         <tr>        <td>Big</td>            <td width="5%">             Sl          </td>           <td>            Label 1             </td>           <td>            Label 1             </td>           <td>            Label 1             </td>           <td>            Label 1             </td>       </tr>       <tr >       <td rowspan="5">        Data1:<b/>              </td>       </tr>       <tr>            <td width="5%"></td>            <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>       <tr id="rowId">             <td width="5%"  onclick="loadSubDatalevel()">+</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>       <tr>            <td width="5%"></td>            <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>       <tr>            <td width="5%"></td>            <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>             <td>Some data1</td>         </tr>   </tbody> <table></td></tr>');
}
}
</script>
</body>
</html>

Answer 1

插入后包含“+”的列更宽，因为底部插入的行在标题为“Sl”的列中包含“ Some data1 ”（第二列，和不是第三个）。

问题在于，在初始表的第二行，您有一个<td rowspan="5">，但在插入后，您有一个新行，因此您需要更新rowspan属性你可以用以下方法做到这一点：

$('.table_main tr:nth-child(2) td').attr('rowspan', $('.table_main tr:nth-child(2) td').attr('rowspan')+1);

动态表添加了jQuery

1 个答案: