如何使用Jquery将具有colspan attr值的td拆分为具有相同值的单个TD?

时间:2017-07-20 07:11:32

标签: jquery html

嗨我需要将具有colspan attr的td分成具有相同值的每个td。

这里我有colspan =" 3",所以我需要用相同的值填充3个TD&#39。

这是我的HTML

<tr style="height:15.0pt;"><input type="checkbox" id="selectall" class="dt-checkboxes" value="">
            <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" colspan="3">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" colspan="3">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>

我尝试过如下但无法获得解决方案

 var count=0;
        $('table#sheet_0 td').each(function(){
            var td= $('td[colspan]').attr('colspan');
            if(td>0){
                var tdSelect=$('td[colspan]')[count];
                alert('hi' + tdSelect);
                var tdVal=tdSelect.val();
                alert(tdVal);
                for(var j = 0;j<td;j++){
                    $('<td>').append.val(tdVal).append('</td>');
                }
                count++;
            }else{

            }
        }); 

我需要根据具有相同td值的colspan值生成td。

帮助表示赞赏。感谢

1 个答案:

答案 0 :(得分:2)

colspan获取td,然后将clone元素创建为该td,并从克隆删除colspan属性。

现在inserttd并从表中删除原始td

以下是对您的代码的修改。

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

  }
});
.td_0_1,
{
  width: 30px;
}

td {
  border: 1px solid #efefef;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<table>
  <tr style="height:15.0pt;">
    <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" colspan="3">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" colspan="3">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>
</table>