Question

我已经创建了一个动态表，没有任何问题。但是我得到了错误的行号。另外，当我删除一行时，我需要按升序显示正确的数字。

 

var myHead = new Array();    	
myHead = ['Title1','Title2', 'Title3',''];
function createTable() {
    var myTable = document.createElement('table');
    myTable.setAttribute('id', 'myTable'); 
    var tr = myTable.insertRow(-1);    
    for (var h = 0; h < myHead.length; h++) {
        var th = document.createElement('th');          
        th.innerHTML = myHead[h];
        tr.appendChild(th);
    }    
    var div = document.getElementById('main_Div');
    div.appendChild(myTable);    
}    
function addRow() {
    var myTab = document.getElementById('myTable');    		
    var rowCnt = myTab.rows.length;    
    var tr = myTab.insertRow(rowCnt);      
    tr = myTab.insertRow(rowCnt);    
	var No = "Row_"+rowCnt;    		
    for (var c = 0; c < myHead.length; c++) {
        var td = document.createElement('td');       
        td = tr.insertCell(c);    
        if (c == 0) {
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
            ele.setAttribute('value', No);
	     	ele.setAttribute('readonly', true);
	    	ele.setAttribute('name', 'No');    
            td.appendChild(ele);
        }
        else if (c == 1) {
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
            ele.setAttribute('value', '');
			ele.setAttribute('name', 'T_Name');
			ele.setAttribute('id', 'T_Name');
            td.appendChild(ele);
        }
        else if (c == 2) {
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
            ele.setAttribute('value', '');

            td.appendChild(ele);
        }
		else if (c == 3) {         
            var button = document.createElement('input');
            button.setAttribute('type', 'button');
            button.setAttribute('value', 'Remove');	   
            button.setAttribute('onclick', 'removeRow(this)');

            td.appendChild(button);
        }
			
    }
}   

function removeRow(button) {
    var myTab = document.getElementById('myTable');
    myTab.deleteRow(button.parentNode.parentNode.rowIndex);     
}

<head>
    <title>Dynamic table</title>    
</head>
<body onload="createTable()">
    <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />        		
    <div id="main_Div"></div>
</body>

我最近开始使用JavaScript，但是在我的项目中遇到了麻烦。

请有人帮我吗？提前非常感谢您。

Answer 1

如果要在执行某些操作后对行进行重新编号，则需要对已删除的行之后的每一行进行重新编号。一种方法是映射每行并更新输入值。

   var myHead = new Array();    	
    	 myHead = ['Title1','Title2', 'Title3',''];
        function createTable() {
            var myTable = document.createElement('table');
            myTable.setAttribute('id', 'myTable'); 
            var tr = myTable.insertRow(-1);    
            for (var h = 0; h < myHead.length; h++) {
                var th = document.createElement('th');          
                th.innerHTML = myHead[h];
                tr.appendChild(th);
            }    
            var div = document.getElementById('main_Div');
            div.appendChild(myTable);    
        }
    
        function addRow() {
            var myTab = document.getElementById('myTable');    		
            var rowCnt = myTab.rows.length;    
    		var tr = myTab.insertRow(rowCnt);      
            // tr = myTab.insertRow(rowCnt);    
    		var No = "Row_"+rowCnt;    		
            for (var c = 0; c < myHead.length; c++) {
                var td = document.createElement('td');       
                td = tr.insertCell(c);    
                if (c == 0) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', No);
    				ele.setAttribute('readonly', true);
    				ele.setAttribute('name', 'No');    
                    td.appendChild(ele);
                }
    			else if (c == 1) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', '');
    				ele.setAttribute('name', 'T_Name');
    				ele.setAttribute('id', 'T_Name');
    
                    td.appendChild(ele);
                }
    			else if (c == 2) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', '');
    
                    td.appendChild(ele);
                }
    			else if (c == 3) {         
                    var button = document.createElement('input');
                    button.setAttribute('type', 'button');
                   button.setAttribute('value', 'Remove');
    			   
                    button.setAttribute('onclick', 'removeRow(this)');
    
                    td.appendChild(button);
                }
    			
            }
        }    
    
        function removeRow(button) {
            var myTab = document.getElementById('myTable');
            myTab.deleteRow(button.parentNode.parentNode.rowIndex);

            // Use map to rebuild input values
            [].slice.call(myTab.rows).map(
                 function (item,index) {  
                    if (item.firstChild.firstChild.nodeType == 1) {
                        item.firstChild.firstChild.value = "Row_" + index
                    };
                    return true; 
                 });
        }

    <head>
        <title>Dynamic table</title>    
    </head>
    <body onload="createTable()">
    <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
    		
        <div id="main_Div"></div>
    </body>

计算动态表创建中的行时出现问题

1 个答案: