Javascript 基于行跨度修改行也可以使用jquery进行修改

我正在使用一张有两个部分的桌子。第一部分有4行 第二部分有3行。我将

td

附加到带有 第4行和第2节第3行。我想使用jQuery，基于 每个部分的数据库。我根据每个节中的第一行附加行跨度。问题是：当我从底部删除行时，它工作正常，但当我从中间删除行时，行跨度没有正确追加。请帮我解决这个问题

$（文档）.ready（函数（）{
$（'my#u table'）。在（'click'，'delete'，function（）上{
$（this）.closest（'tr'）.remove（）；
});
$（'td'）。单击（函数（）{
var row_index=$（this.parent（）.index（）；
log（行索引'my'）；
如果（行索引=1）{
log（行索引'if'）；
行span='3'>附加项“”；
$（'table tr'）.eq（2）.attr({
名字：“第一”
});
$（“tr[name='first']td:last child”）。之后（“附加项”）；
}
如果（行索引=5）{
log（行索引'if'）；
$（'table tr'）.eq（6）.attr({
姓名：“第二”
});
$（“tr[name='first']td:last child”）。之后（“附加项”）；
}
});
})；

表格，
th，
运输署{
边框：1px纯黑；
}

名称
代币
行动
社会的
ins_Ram
1.
删除
社会的
英苏萨姆
2.
删除
ins_大坝
3.
删除
因苏瓦姆
4.
删除
行波管Ram
5.
删除
社会的
twt_sam
6.
删除
twt_大坝
7.
删除

我将为您的问题提供一个建议。我正在使用类和id修改表行和行跨度

           <table id="my_table">
              <tr>
                <td>Name</td>
                <td>Tokens</td>
                <td>action</td>
                <td>social</td>
              </tr>
              <tr class="first" id="1">
                <td>ins_Ram</td>
                <td>1</td>
                <td><button class="delete">delete</button></td>
                <td rowspan="4" class="first_rowspan">social</td>
              </tr>
              <tr class="first" id="2">
                <td>ins_sam</td>
                <td>2</td>
                <td><button class="delete">delete</button></td>

              </tr>
              <tr class="first" id="3">
                <td>ins_dam</td>
                <td>3</td>
                <td><button class="delete" >delete</button></td>
              </tr>
              <tr class="first" id="4">
                <td>ins_vam</td>
                <td>4</td>
                <td><button class="delete" >delete</button></td>
              </tr>
              <tr class="second" id="5">
                <td>twt_Ram</td>
                <td>5</td>
                <td><button class="delete" >delete</button></td>
                <td rowspan="4" class="second_rowspan">social</td>
              </tr>
              <tr class="second" id="6">
                <td>twt_sam</td>
                <td>6</td>
                <td><button class="delete" >delete</button></td>
              </tr>
              <tr class="second" id="7">
                <td>twt_dam</td>
                <td>7</td>
                <td><button class="delete" >delete</button></td>
              </tr>
            </table>
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
            <script>
                $(document).ready(function() {
                $("#my_table").on("click", ".delete", function() {
                    //alert($(this).parent().parent().prop('className'));

                    var id = $(this).parent().parent().attr('id');
                    var tr_class = $(this).parent().parent().prop('className');
                    $("#"+id).remove();
                var allClass = document.getElementsByClassName(tr_class);
                var lnth     = allClass.length;
                var rowspan  = document.getElementsByClassName(tr_class+'_rowspan');
                var rowspan_class = tr_class+'_rowspan';    
                //alert(lnth+' '+);
                    if(lnth>0 && rowspan.length>0){
                         $('.'+rowspan_class).attr("rowspan", lnth);   
                    }else if(lnth>0 && rowspan.length==0){
                        //alert(allClass[0].id);
                        $("tr#"+allClass[0].id+" > td:last").after('<td 
                 class="'+rowspan_class+'" rowspan="'+lnth+'">Social</td>');
                    }else{}
                });
            });
            </script>

名称
代币
行动
社会的
ins_Ram
1.
删除
社会的
英苏萨姆
2.
删除
ins_大坝
3.
删除
因苏瓦姆
4.
删除
行波管Ram
5.
删除
社会的
twt_sam
6.
删除
twt_大坝
7.
删除
$（文档）.ready（函数（）{
$（“#我的#表”）。在（“单击”，“删除”，函数（）上{
//警报（$（this.parent（）.parent（）.prop（'className'））；
var id=$（this.parent（）.parent（）.attr（'id'）；
var tr_class=$（this.parent（）.parent（）.prop（'className'）；
$（“#”+id）.remove（）；
var allClass=document.getElementsByClassName（tr_类）；
var lnth=allClass.length；
var rowspan=document.getElementsByClassName（tr_class+“”“rowspan”）；
var rowspan_class=tr_class+“urowspan”；
//警报（lnth+“”+）；
如果（lnth>0&&rowspan.length>0）{
$（'..+行span_类）.attr（“行span”，lnth）；
}else if（lnth>0&&rowspan.length==0）{
//警报（allClass[0].id）；
$（“tr#“+allClass[0].id+”>td:last”）。在（'Social'）之后；
}else{}
});
});

我将为您的问题提供一个建议。我正在使用类和id修改表行和行跨度

           <table id="my_table">
              <tr>
                <td>Name</td>
                <td>Tokens</td>
                <td>action</td>
                <td>social</td>
              </tr>
              <tr class="first" id="1">
                <td>ins_Ram</td>
                <td>1</td>
                <td><button class="delete">delete</button></td>
                <td rowspan="4" class="first_rowspan">social</td>
              </tr>
              <tr class="first" id="2">
                <td>ins_sam</td>
                <td>2</td>
                <td><button class="delete">delete</button></td>

              </tr>
              <tr class="first" id="3">
                <td>ins_dam</td>
                <td>3</td>
                <td><button class="delete" >delete</button></td>
              </tr>
              <tr class="first" id="4">
                <td>ins_vam</td>
                <td>4</td>
                <td><button class="delete" >delete</button></td>
              </tr>
              <tr class="second" id="5">
                <td>twt_Ram</td>
                <td>5</td>
                <td><button class="delete" >delete</button></td>
                <td rowspan="4" class="second_rowspan">social</td>
              </tr>
              <tr class="second" id="6">
                <td>twt_sam</td>
                <td>6</td>
                <td><button class="delete" >delete</button></td>
              </tr>
              <tr class="second" id="7">
                <td>twt_dam</td>
                <td>7</td>
                <td><button class="delete" >delete</button></td>
              </tr>
            </table>
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
            <script>
                $(document).ready(function() {
                $("#my_table").on("click", ".delete", function() {
                    //alert($(this).parent().parent().prop('className'));

                    var id = $(this).parent().parent().attr('id');
                    var tr_class = $(this).parent().parent().prop('className');
                    $("#"+id).remove();
                var allClass = document.getElementsByClassName(tr_class);
                var lnth     = allClass.length;
                var rowspan  = document.getElementsByClassName(tr_class+'_rowspan');
                var rowspan_class = tr_class+'_rowspan';    
                //alert(lnth+' '+);
                    if(lnth>0 && rowspan.length>0){
                         $('.'+rowspan_class).attr("rowspan", lnth);   
                    }else if(lnth>0 && rowspan.length==0){
                        //alert(allClass[0].id);
                        $("tr#"+allClass[0].id+" > td:last").after('<td 
                 class="'+rowspan_class+'" rowspan="'+lnth+'">Social</td>');
                    }else{}
                });
            });
            </script>

名称
代币
行动
社会的
ins_Ram
1.
删除
社会的
英苏萨姆
2.
删除
ins_大坝
3.
删除
因苏瓦姆
4.
删除
行波管Ram
5.
删除
社会的
twt_sam
6.
删除
twt_大坝
7.
删除
$（文档）.ready（函数（）{
$（“#我的#表”）。在（“单击”，“删除”，函数（）上{
//警报（$（this.parent（）.parent（）.prop（'className'））；
var id=$（this.parent（）.parent（）.attr（'id'）；
var tr_class=$（this.parent（）.parent（）.prop（'className'）；
$（“#”+id）.remove（）；
var allClass=document.getElementsByClassName（tr_类）；
var lnth=allClass.length；
var rowspan=document.getElementsByClassName（tr_class+“”“rowspan”）；
var rowspan_class=tr_class+“urowspan”；
//警报（lnth+“”+）；
如果（lnth>0&&rowspan.length>0）{
$（'..+行span_类）.attr（“行span”，lnth）；
}else if（lnth>0&&rowspan.length==0）{
//警报（allClass[0].id）；
$（“tr#“+allClass[0].id+”>td:last”）。在（'Social'）之后；
}else{}
});
});