Question

这是我的代码

 $('table td').each(function() {
        var td = $(this).attr('rowspan');
        if (td > 0) {
        var tdVal = $(this).html();
        for (var j = 0; j < td; j++) {
            var newRow = $(this).clone();
            newRow.removeAttr('rowspan');
            newRow.html(tdVal);
            $(this).after(newRow);
        }
    $(this).remove();
   count++;
 } else {

}
});

这是我的HTML

<tr style="height:15.0pt;"><input value="" class="dt-checkboxes" id="row_0" type="checkbox">
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_2">Seguros Generales</td>
            <td class="td_0_2">Seguros Generales</td>
            <td class="td_0_2">Seguros Generales</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">Seguros de Personas</td>
            <td class="td_0_1">Seguros de Personas</td>
            <td class="td_0_1">Seguros de Personas</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1" rowspan="2">Total general</td>
          </tr>
          <tr><input value="" class="dt-checkboxes" id="row_1" type="checkbox">
            <td class="td_0_1">Modalidad</td>
            <td class="td_0_1">Ramo</td>
            <td class="td_0_1">LBC-G</td>
            <td class="td_0_1">CRI-G</td>
            <td class="td_0_1">ILL-G</td>
            <td class="td_0_1">ALI-G</td>
            <td class="td_0_3">BIS-G</td>
            <td class="td_0_3">FOR-G</td>
            <td class="td_0_3">LAT-G</td>
            <td class="td_0_1">TOT. SG</td>
            <td class="td_0_3">BUP-P</td>
            <td class="td_0_1">LVI-P</td>
            <td class="td_0_1">LBC-P</td>
            <td class="td_0_3">PRO-P</td>
            <td class="td_0_3">NAL-P</td>
            <td class="td_0_3">ALI-P</td>
            <td class="td_0_3">CRDI-P</td>
            <td class="td_0_1">TOT. SP</td>
          </tr>

从上面的代码中，我有一个包含rowspan的td。我需要的是将rowspan td添加到下一个tr，例如在

之后

<td class="td_0_1">TOT. SP</td>

并使用jquery清空rowspan值和相应的td值。

注意：在此过程之后，应删除rowspan属性。

帮助表示赞赏。感谢

Answer 1

您可以使用.parent()获取父元素（tr}和.next()以获取要追加的下一个元素（下一个tr）和.append()在td孩子的末尾克隆tr。

使用此：

$(this).parent().next().append(newRow);

而不是

$(this).after(newRow);

＆＃13;

 $('table td').each(function() {
        var td = $(this).attr('rowspan');
        if (td > 0) {
        var tdVal = $(this).html();
        for (var j = 0; j < td; j++) {
            var newRow = $(this).clone();
            newRow.removeAttr('rowspan');
            newRow.html(tdVal);
            $(this).parent().next().append(newRow);
        }
    $(this).removeAttr('rowspan');
    $(this).empty();
 } 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr style="height:15.0pt;"><input value="" class="dt-checkboxes" id="row_0" type="checkbox">
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_2">Seguros Generales</td>
            <td class="td_0_2">Seguros Generales</td>
            <td class="td_0_2">Seguros Generales</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">Seguros de Personas</td>
            <td class="td_0_1">Seguros de Personas</td>
            <td class="td_0_1">Seguros de Personas</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1">&nbsp;</td>
            <td class="td_0_1" rowspan="2">Total general</td>
          </tr>
          <tr><input value="" class="dt-checkboxes" id="row_1" type="checkbox">
            <td class="td_0_1">Modalidad</td>
            <td class="td_0_1">Ramo</td>
            <td class="td_0_1">LBC-G</td>
            <td class="td_0_1">CRI-G</td>
            <td class="td_0_1">ILL-G</td>
            <td class="td_0_1">ALI-G</td>
            <td class="td_0_3">BIS-G</td>
            <td class="td_0_3">FOR-G</td>
            <td class="td_0_3">LAT-G</td>
            <td class="td_0_1">TOT. SG</td>
            <td class="td_0_3">BUP-P</td>
            <td class="td_0_1">LVI-P</td>
            <td class="td_0_1">LBC-P</td>
            <td class="td_0_3">PRO-P</td>
            <td class="td_0_3">NAL-P</td>
            <td class="td_0_3">ALI-P</td>
            <td class="td_0_3">CRDI-P</td>
            <td class="td_0_1">TOT. SP</td>
          </tr>
</table>

＆＃13;

Answer 2

我假设它始终是您的第一个td中tr的{{1}} rowspan，rowspan并且没有其他colspan td 1}} s或tr在表中发生。如果情况并非如此，那么下面的代码将无效，事情会变得复杂得多。

我在下面做了一个示例，检查第一个rowspan中的tr tr是否为td。如果找到并跨越超过1行，则它将遍历第一个rowspan之后的所有rowspan，并附加最后一个td的克隆。这将针对function removeRowspan() { var $firstTr = $('table tr:first'); var $lastTd = $firstTr.children('td:last'); var rowspan = $lastTd.attr('rowspan'); $lastTd.removeAttr('rowspan'); if (rowspan && rowspan>1) { $firstTr.nextAll('tr').each(function(i) { if (i==rowspan-2) { $(this).append($lastTd.clone()); return false; } else { $(this).append($('<td>')); } }); $lastTd.html(''); } } $('#remove-rowspan').on('click',removeRowspan);中指示的行数进行，因此在我的示例中，最后一行不受影响，因为它不属于td { padding: 8px; border: 1px solid #ccc; }。

我没有使用你的html作为我的例子，因为我认为在一个更简单的例子中可以更好地说明效果。我还添加了一个按钮来执行操作，以便您可以更好地了解会发生什么。在您自己的代码中，您显然应该省略此按钮以及随之而来的click事件。

修改
我刚刚注意到你想要清除其他最后<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> <td rowspan="3">Total</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td>4.4</td> <td>4.5</td> <td>4.6</td> </tr> </table> <button id="remove-rowspan">Remove rowspan</button>个的内容，所以我在示例中添加了它。

＆＃13;
＆＃13;
$(function() { var $firstTr = $('table tr:first'); var $lastTd = $firstTr.children('td:last'); var rowspan = $lastTd.attr('rowspan'); $lastTd.removeAttr('rowspan'); if (rowspan && rowspan>1) { $firstTr.nextAll('tr').each(function(i) { if (i==rowspan-2) { $(this).append($lastTd.clone()); return false; } else { $(this).append($('<td>')); } }); $lastTd.html(''); } });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr style="height:15.0pt;"><input value="" class="dt-checkboxes" id="row_0" type="checkbox"> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_2">Seguros Generales</td> <td class="td_0_2">Seguros Generales</td> <td class="td_0_2">Seguros Generales</td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1">Seguros de Personas</td> <td class="td_0_1">Seguros de Personas</td> <td class="td_0_1">Seguros de Personas</td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1"> </td> <td class="td_0_1" rowspan="2">Total general</td> </tr> <tr><input value="" class="dt-checkboxes" id="row_1" type="checkbox"> <td class="td_0_1">Modalidad</td> <td class="td_0_1">Ramo</td> <td class="td_0_1">LBC-G</td> <td class="td_0_1">CRI-G</td> <td class="td_0_1">ILL-G</td> <td class="td_0_1">ALI-G</td> <td class="td_0_3">BIS-G</td> <td class="td_0_3">FOR-G</td> <td class="td_0_3">LAT-G</td> <td class="td_0_1">TOT. SG</td> <td class="td_0_3">BUP-P</td> <td class="td_0_1">LVI-P</td> <td class="td_0_1">LBC-P</td> <td class="td_0_3">PRO-P</td> <td class="td_0_3">NAL-P</td> <td class="td_0_3">ALI-P</td> <td class="td_0_3">CRDI-P</td> <td class="td_0_1">TOT. SP</td> </tr> </table>
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

使用您自己的html：

＆＃13;
＆＃13;
{{1}}
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

如何让td具有rowspan并使用jquery将其拆分为下一个tr元素？

2 个答案: