CODEWITHSUNDEEP
javascriptjqueryhtml
Meltdowner
Meltdowner

Reputation: 55

Dynamic table rows and columns

I'd like to be able to add/remove rows/columns in my table but I don't how to achieve this given my knowledge in js/jquery is basic. I've search and seen related topics but none fits to what I wanted to happen.

As you can see in my code below I have 11 columns with the <th> tag and a default row and they must not be affected by remove. Also, when adding new column the PO increments like PO 10.

<table class="main-table" id="po-table" border="1">
    <tbody>
        <tr class="table-header">
            <td>#</td>
            <td>Course Code</td>
            <td>Course Name</td>
            <td>PO 1</td>
            <td>PO 2</td>
            <td>PO 3</td>
            <td>PO 4</td>
            <td>PO 5</td>
            <td>PO 6</td>
            <td>PO 7</td>
            <td>PO 8</td>
            <td>PO 9</td>
        </tr>
        <tr class="default-row">
            <td>1</td>
            <td><input type="text" name="course_code[]"></td>
            <td><input type="text" name="course_name[]"></td>
            <td><input type="checkbox" name="po1[]" value="Po1"></td>
            <td><input type="checkbox" name="po2[]" value="Po2"></td>
            <td><input type="checkbox" name="po3[]" value="Po3"></td>
            <td><input type="checkbox" name="po4[]" value="Po4"></td>
            <td><input type="checkbox" name="po5[]" value="Po5"></td>
            <td><input type="checkbox" name="po6[]" value="Po6"></td>
            <td><input type="checkbox" name="po7[]" value="Po7"></td>
            <td><input type="checkbox" name="po8[]" value="Po8"></td>
            <td><input type="checkbox" name="po9[]" value="Po9"></td>
        </tr>
    </tbody>
</table>

Picture of the output: enter image description here

Upvotes: 3

Views: 8034

Answers (3)

Ankit verma
Ankit verma

Reputation: 29

For Dynamic creation of tables with respect to entered row and column, you can use this code

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Dynamic Table</title> 
<script>
function createTable()
{
rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns",1);

 for(var r=0;r<parseInt(rn,10);r++)
  {
   var x=document.getElementById('myTable').insertRow(r);
   for(var c=0;c<parseInt(cn,10);c++)  
    {
     var y=  x.insertCell(c);
     y.innerHTML="Row-"+r+" Column-"+c; 
    }
   }
}

</script>
<style type="text/css"> 
body {margin: 30px;} 
</style>  
</head><body> 
<table id="myTable" border="1"> 
</table><form> 
<input type="button" onclick="createTable()" value="Create the table"> 
</form></body></html>

Upvotes: 0

userDEV
userDEV

Reputation: 535

Add this to your body http://www.redips.net/javascript/adding-table-rows-and-columns/

<button onclick="addRow()">Add Row</button>
<button onclick="addCol()">Add Column</button>


<button onclick="removeRow()">Remove Row</button>
<button onclick="removeCol()">Remove Column</button>

<script>
var table = document.getElementById("po-table");

function addRow() {
    
    var lastrow = table.rows.length;
	var lastcol = table.rows[0].cells.length;	
	var row = table.insertRow(lastrow);	
	var cellcol0 = row.insertCell(0);
	cellcol0.innerHTML = "<input type='text' name='course_code[]'></input>";
	var cellcol1 = row.insertCell(1);
	cellcol1.innerHTML = "<input type='text' name='course_name[]'></input>";
	
	for(i=2; i<lastcol;i++)
	{
		var cell1 = row.insertCell(i);
		cell1.innerHTML = "<input type='checkbox' name='pos[]'></input>";
	}
    
}
function addCol() {
    
    var lastrow = table.rows.length;
	var lastcol = table.rows[0].cells.length;
	var headertxt = table.rows[0].cells[lastcol-1].innerHTML;
	var headernum = headertxt.slice(headertxt.indexOf("PO")+2);
	headernum = headernum.trim();
	
    //for each row add column
	for(i=0; i<lastrow;i++)
	{
		
		var cell1 = table.rows[i].insertCell(lastcol);
		if(i==0)
			cell1.innerHTML = "PO " + (Number(headernum)+1);
		else
			cell1.innerHTML = "<input type='checkbox' name='pos[]'></input>";
		
	}
}

function removeRow(){
	var lastrow = table.rows.length;
	if(lastrow<2){
		alert("You have reached the minimal required rows.");
		return;
	}
	table.deleteRow(lastrow-1);
}

function removeCol(){

	var lastcol = (table.rows[0].cells.length)-1;
	var lastrow = (table.rows.length);
	//disallow first two column removal unless code is add to re-add text box columns vs checkbox columns
	if(lastcol<3){
		alert("You have reached the minimal required columns.");
		return;
	}
	
	 //for each row remove column
	for(i=0; i<lastrow;i++)
	{
		table.rows[i].deleteCell(lastcol);
	}
}
</script>

Upvotes: 3

Mike Legacy
Mike Legacy

Reputation: 1066

You can just clone the current row and append it to the table with the following jQuery: 

$(".default-row").clone().insertAfter(".default-row:last-child");

An example of it working is here: http://jsfiddle.net/05Lo1sm6/

Upvotes: 0

Related Questions