CODEWITHSUNDEEP
javascript
user3280899
user3280899

Reputation: 201

problem counting the rows from dynamic table creation

I have created a dynamic table without any problem. But I am getting the wrong row numbers. Also when I remove a row I need to show the correct numbers in ascending order. 

 

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>

I have started to use JavaScript recently and having trouble working on in my project.

Please anyone help me? Thank you so much in advance.

Upvotes: 0

Views: 72

Answers (1)

Ralph Ritoch
Ralph Ritoch

Reputation: 3440

If you want rows renumbered after some action you need to re-number every row after the one you have removed. One way to do that is to map over every row and update the values of your inputs.

   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>

Upvotes: 1

Related Questions