cells Hide/show in each of the rows of a table using javascript

amarjit111 · #1 (**permalink**) 08-16-10, 02:27 AM

I have a query regarding the hide/show of the cells in a table.

The first column is 'Yes and No' options using combo box, 2nd option is 'input field', 3rd column is also 'Yes and No' option using combo box, and 4th option is also 'input field'.

What I want is to make a table using JAVASCRIPT, in which if i select 'No' from the first row first column, i want to hide the remaining 3 cells of the first row. Otherwise if i select 'yes' from the first row first column i want to show all the 3 other options of the first row. Also in between if I select 'No' from the first row third column i want to hide the first row fourth column cell. Selecting 'yes' from the first row third column will show the first row fourth column.

I want apply the same setting of hide and show cells into the remaining columns also.

By selecting 'no' from first column -> hide other corresponding cells of the row
by selecting 'yes' from the first column -> show other corresponding cells of the row

AND ALSO

By selecting 'no' from third column -> hide fourth cell of the corresponding/same row
by selecting 'yes' from the third column -> show fourth cell of the corresponding/same row

Anyone in the forum please help me to make this table using JAVASCRIPT. I need this table within a day or two.

Waiting for someone's reply.

Yeroon · #2 (**permalink**) 08-16-10, 09:20 AM

Here is something to give you an idea. Far from perfect and not all is working yet, but I think you can build on this. When I have more time, I could try to make a more precise code. Pls let me know if you can work with this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=ISO-8859-1">



<BODY>

<div id="mydiv">


</div>
<script>

function showHide()
{
	if(this.options[this.selectedIndex].value = 'No') {

		document.getElementById('textboxes' + event.srcElement.id.substring(8)).style.display = 'none';
		document.getElementById('selboxescol3' + event.srcElement.id.substring(8)).style.display = 'none';
		document.getElementById('textboxescol4' + event.srcElement.id.substring(8)).style.display = 'none';
	}
	else {

		document.getElementById('textboxes' + event.srcElement.id.substring(8)).style.display = '';
		document.getElementById('selboxescol3' + event.srcElement.id.substring(8)).style.display = '';
		document.getElementById('textboxescol4' + event.srcElement.id.substring(8)).style.display = '';
	}

}

function showHideCol3(sender)
{
	if(event.srcElement.value = 'No') {
		document.getElementById('textboxescol4' + event.srcElement.id.substring(12)).style.display = 'none';
	}
	else {
		document.getElementById('textboxescol4' + event.srcElement.id.substring(12)).style.display = 'block';
	}

}

function renderTable()
{
	var tbl = document.createElement("table");
	tbl.style.border = 1;
	tbl.style.width = "100%";
	tbl.style.cellPadding = 0;
	tbl.style.cellSpacing = 0;

	for (var i = 0; i < 10; i++) { //asume you need 10 rows
		var row = tbl.insertRow(tbl.rows.length); //append at last position
		var tdFirstColumn = document.createElement("TD");
		var sel = document.createElement("Select");
		sel.id = 'selboxes' + i;
		sel.options[sel.options.length] = new Option('Yes','Yes');
		sel.options[sel.options.length] = new Option('No','No');
		tdFirstColumn.appendChild(sel);
		row.appendChild(tdFirstColumn);

		if (sel.addEventListener) {
			sel.addEventListener('change', showHide, false);
		}
		else if (sel.attachEvent) {
			sel.attachEvent('onchange', showHide);
		}


		var tdSecondColumn  = document.createElement("TD");
		var tb = document.createElement("Input");
		tb.id = 'textboxes' + i;
		tdSecondColumn.appendChild(tb);
		row.appendChild(tdSecondColumn);

		var tdThirdColumn  = document.createElement("TD");
		var sel2 = document.createElement("Select");
		sel2.id = 'selboxescol3' + i;
		sel2.options[sel2.options.length] = new Option('Yes','Yes');
		sel2.options[sel2.options.length] = new Option('No','No');
		tdThirdColumn.appendChild(sel2);
		
		row.appendChild(tdThirdColumn);

		if (sel2.addEventListener) {
			sel2.addEventListener('change', showHideCol3, false);
		}
		else if (sel2.attachEvent) {
			sel2.attachEvent('onchange', showHideCol3);
		}

		var tdFourthColumn  = document.createElement("TD");
		var tb = document.createElement("Input");
		tb.id = 'textboxescol4' + i;
		tdFourthColumn.appendChild(tb);
		row.appendChild(tdFourthColumn);

	}

	document.getElementById('mydiv').appendChild(tbl);
}
</script>
<script>
renderTable();
</script>
</BODY></HTML>