JavaScript Add/Remove Rows/Columns in HTML Table

Sunday, May 15, 2011

JavaScript Add/Remove Rows/Columns in HTML Table

In this Article we will create a user interface (UI) where user can Add or Delete Rows or Columns in a HTML Table using JavaScript. Our UI contains one HTML table and 5 Buttons. The functionalities of all these buttons are described here. AddRow will add a new row to the existing table and AddColumn will append a new column to the existing table. You can also remove multiple rows at a time by selecting multiple checkboxes and hitting DeleteSelectedRows Button. DeleteColumn button will delete one row from the table and finally DeleteAllRows will delete all the rows from the table.

Programmatically with insertRow() method you can insert a new row at the specified position in HTML table. After row is created, use insertCell() method to insert a table cell. You can use deleteRow() method to delete an particular row from the table.

Try the demo here.

The html code looks like the below -

<HTML>
<HEAD>
</HEAD>
<BODY>
<center>
<input type="button" value="Add row" onClick="addRow()" />
<input type="button" value="Add column" onClick="addColumn()" />
<input type="button" value="Delete selected rows" onClick="deleteSelectedRows()" />
<input type="button" value="Delete column" onClick="deleteColumn()" />
<input type="button" value="Delete all rows" onClick="deleteAllRows()" />
<br>
<table id="my_table" align="center" border="2" cellpadding="0" cellspacing="0">
<thead><tr>
<th>Select</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" ></td>
<td><input type="text" /></td>
<td><select><option value="1">Bhubaneswar<option value="2">Mumbai<option value="3">Banglore</select></td>
</tr>

<tr>
<td><input type="checkbox" ></td>
<td><input type="text" /></td>
<td><select><option value="1">Bhubaneswar<option value="2">Mumbai<option value="3">Banglore</select></td>
</tr>
</tbody></table></center>
</BODY>
</HTML>

JavaScript required for the above demo as follows -

// Add row to the HTML table
function addRow() {    
 var table = document.getElementById('my_table'); //html table
 var rowCount = table.rows.length; //no. of rows in table
 var columnCount =  table.rows[0].cells.length; //no. of columns in table          
 var row = table.insertRow(rowCount); //insert a row            
 
 var cell1 = row.insertCell(0); //create a new cell           
 var element1 = document.createElement("input"); //create a new element           
 element1.type = "checkbox"; //set the element type 
 element1.setAttribute('id', 'newCheckbox'); //set the id attribute         
 cell1.appendChild(element1); //append element to cell
             
 var cell2 = row.insertCell(1);            
 var element2 = document.createElement("input");            
 element2.type = "text"; 
 element2.setAttribute('id', 'newInput'); //set the id attribute
 cell2.appendChild(element2);             
 
 var cell3 = row.insertCell(2);            
 var element3 = document.createElement("select");
 element3.setAttribute('id', 'newSelect'); //set the id attribute      
 //Create options dynamically. This will not work in mozilla.
 var option1 = document.createElement("option"); //create a option element
 option1.text = "Bhubaneswar"; //set the text for option
 option1.value = "1"; //set the value for option
 element3.add(option1); //add option to select box  
 
 var option2 = document.createElement("option");
 option2.text = "Mumbai";
 option2.value = "2"; 
 element3.add(option2);
 
 var option3 = document.createElement("option");
 option3.text = "Banglore";
 option3.value = "3";
 element3.add(option3);

 cell3.appendChild(element3);
 //Add the cells for more than 3 columns
 if(columnCount >= 3){
  for (var i=4; i<=columnCount; i++) {
   var newCel = row.insertCell(i-1); //create a new cell           
   var element = document.createElement("div"); //create a div element
   var txt = document.createTextNode("cell "+i); //create a text element
   element.appendChild(txt); //append text to div      
   newCel.appendChild(element); //appent div to cell
  }
 }
} 

// delete the selected rows from table
function deleteSelectedRows() {    
 var table = document.getElementById('my_table'); //html table
        var rowCount = table.rows.length; //no. of rows in table          
 for(var i=0; i< rowCount; i++) { //loops for all row in table               
  var row = table.rows[i]; //return a particular row              
  var chkbox = row.cells[0].childNodes[0]; //get check box onject               
  if(null != chkbox && true == chkbox.checked) { //wheather check box is selected                   
   table.deleteRow(i); //delete the selected row                    
   rowCount--; //decrease rowcount by 1                   
   i--;               
  }             
 }
}

// append column to the HTML table
function addColumn() {    
 var tblHeadObj = document.getElementById('my_table').tHead; //table head
 for (var h=0; h< tblHeadObj.rows.length; h++) {
  var newTH = document.createElement('th');
  tblHeadObj.rows[h].appendChild(newTH); //append ne th to table
  newTH.innerHTML = 'Column '+ (tblHeadObj.rows[h].cells.length); //append th content to th
 }

 var tblBodyObj = document.getElementById('my_table').tBodies[0]; //table body
 for (var i=0; i< tblBodyObj.rows.length; i++) {
  var newCell = tblBodyObj.rows[i].insertCell(-1); //create new cell
  newCell.innerHTML = 'cell '+ (tblBodyObj.rows[i].cells.length); //append data to cell
 }
}

// delete table rows with index greater then 0
function deleteAllRows() {    
 var tbl = document.getElementById('my_table'); // table reference        
 lastRow = tbl.rows.length - 1; // set the last row index           
 // delete rows with index greater then 0    
 for (i = lastRow; i > 0; i--) {        
  tbl.deleteRow(i);  //delete the row  
 }
} 
  
// delete last table column
function deleteColumn() {    
 var allRows = document.getElementById('my_table').rows;
 for (var i=0; i< allRows.length; i++) {
  if (allRows[i].cells.length > 3) {
   allRows[i].deleteCell(-1); //delete the cell
  } else {
   alert("You can't delete more columns.");
   return;
  }
 }
}