js对table的操作

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

主要功能是实现,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>
相关文章
|
5月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
47 1
|
5月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
48 1
|
6月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
142 1
|
6月前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
40 1
|
5月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
38 0
|
5月前
|
存储 JavaScript 前端开发
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
41 0
|
5月前
|
JavaScript 前端开发
js/javascript 操作对象【全】(含常用的操作对象的lodash)
js/javascript 操作对象【全】(含常用的操作对象的lodash)
36 0
|
5月前
|
存储 JavaScript 前端开发
js/javascript 操作数组【全】(含常用的操作数组的lodash)
js/javascript 操作数组【全】(含常用的操作数组的lodash)
27 0
|
5月前
|
JavaScript
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
142 0
|
5月前
|
JavaScript 前端开发
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
117 0