js对table的操作

最新推荐文章于 2024-05-16 16:52:30 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量238

点赞数

文章标签： js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/128895387

版权

主要功能是实现，table里删除一行序号不变，table内容写死，不是foreach里的index。

<html>
<head>
<script>
function deleteTest(obj){
    var tr=obj.parentNode;
    var tds=tr.childNodes;
    var tdNames=tds[0].id.split('.');
    var integer1=parseInt(tdNames[0]);
    var integer2=parseInt(tdNames[1]);
    var tbody=tr.parentNode;
    var trs=document.getElementsByTagName('tr');
    var bigTrCount=0;
    var x={};
    var beforeTrCount=tdNames[0]-1;//要被删除大节点前面的tr个数
    for(var i=0;i<trs.length;i++){
        if(trs[i].childNodes[0].id.split('.').length==1){
            bigTrCount++;//获取大结点个数
        }else{
            if(x[parseInt(trs[i].childNodes[0].id.split('.')[0])]===undefined){
                x[parseInt(trs[i].childNodes[0].id.split('.')[0])]=1;//初始化各大节点个数，此时为1
            }else{
                x[parseInt(trs[i].childNodes[0].id.split('.')[0])]++;//获取各大节点个数
            }
        }
    }
    for(var i=1;i<integer1;i++){
        beforeTrCount=beforeTrCount+x[i];
    }
    var trCount=beforeTrCount+x[integer1];//截至到该删除大节点的位置
    if(tdNames.length==1){//没有逗号后面的位数
        if(integer1<bigTrCount){//该大节点不是最后一个大节点
            for(var i=beforeTrCount; i<=trCount; i++){//删除整个大节点所有tr
                tbody.removeChild(trs[beforeTrCount]);
            }
            for(var i=beforeTrCount; i<trs.length; i++){//删除整个大节点所有tr
                if(trs[i].firstChild.id.split('.').length==1){//如果是大节点
                    var tdValue=parseInt(trs[i].firstChild.id);
                    trs[i].firstChild.innerText=(tdValue-1).toString();
                    trs[i].firstChild.id=trs[i].firstChild.innerText;        
                }
                if(trs[i].firstChild.id.split('.').length==2){//如果是小节点
                    var tdValue=parseInt(trs[i].firstChild.id.split('.')[0]);
                    trs[i].firstChild.innerText=(tdValue-1).toString()+'.'+trs[i].firstChild.id.split('.')[1];
                    trs[i].firstChild.id=trs[i].firstChild.innerText;        
                }
            }
        }
        if(integer1==bigTrCount){//该大节点是最后一个大节点
            if(bigTrCount==1){//页面上只有一个大节点,直接删除整个tbody
                tbody.parentNode.removeChild(tbody);        
            }
             if(trs[trs.length-1].firstChild.id==tds[0].id){//如果该大节点为空(x[tdNames[0]]==0)也可作为判断条件
                tbody.removeChild(trs[trs.length-1]);
            }else{//该大节点有小节点
                var allCount=trs.length;
                for(var i=beforeTrCount; i<allCount; i++){//删除整个大节点所有tr
                    tbody.removeChild(trs[beforeTrCount]);
                }
            } 
        }
    }
    if(tdNames.length==2){//该节点为小节点
        if(integer2<x[integer1]){//该节点不在小节点末尾
            tbody.removeChild(trs[beforeTrCount+integer2]);//删除该特定小节点
            var j=integer2;//后续小节点小数点后下标,局部变量，避免修改下一个if判定条件里的integer2值
            for(var i=beforeTrCount+integer2; i<trCount; i++){//后面的小节点 第一个td内text值改变
                trs[i].firstChild.innerText=integer1.toString()+'.'+j.toString();
                j++;
                trs[i].firstChild.id=trs[i].firstChild.innerText;
            }
        }
        if(integer2==x[integer1]){//该节点在小节点末尾
            tbody.removeChild(trs[trCount]);//删除末位节点
        }
    }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr><td id='1'>1</td><td>1</td><td>1</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='1.1'>1.1</td><td>1.1</td><td>1.1</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='1.2'>1.2</td><td>1.2</td><td>1.2</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='2'>2</td><td>2</td><td>2</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='2.1'>2.1</td><td>2.1</td><td>2.1</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='2.2'>2.2</td><td>2.2</td><td>2.2</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='2.3'>2.3</td><td>2.3</td><td>2.3</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='2.4'>2.4</td><td>2.4</td><td>2.4</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='3'>3</td><td>3</td><td>3</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='3.1'>3.1</td><td>3.1</td><td>3.1</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='3.2'>3.2</td><td>3.2</td><td>3.2</td><td οnclick='deleteTest(this)'>del</td></tr>
<tr><td id='3.3'>3.3</td><td>3.3</td><td>3.3</td><td οnclick='deleteTest(this)'>del</td></tr>
</table>
</body>
<html>