[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

Table layout

I am trying to hide a particular textbox in a table of textboxes.
For example, in a 3X3 table, i want hide the middle textbox (at position (1,1))
The problem is that though that textbox gets hidden, it appears as if the the textbox at position (1,2) is hidden.

Please let me know how I can preserve the layout of the table. i.e hide textboxes at any position in a table.

Thanks!
0
dshrenik
Asked:
dshrenik
  • 6
  • 3
  • 2
  • +1
4 Solutions
 
dshrenikAuthor Commented:
To hide a textbox, I am doing this:
           
var textbox = document.getElementById(id);
textbox.style.display = "none";
0
 
Mrugesh1Commented:
Refer this example....
<HTML> 
<HEAD> 
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
    <SCRIPT language="javascript"> 
        function addRow(tableID) { 
  
            var table = document.getElementById(tableID); 
  
            var rowCount = table.rows.length; 
            var row = table.insertRow(rowCount); 
  
            var cell1 = row.insertCell(0); 
            var element1 = document.createElement("input"); 
            element1.type = "checkbox"; 
            cell1.appendChild(element1); 
  
            var cell2 = row.insertCell(1); 
            cell2.innerHTML = rowCount + 1; 
  
            var cell3 = row.insertCell(2); 
            var element2 = document.createElement("input"); 
			element2.id = "txt" + (rowCount + 1) + 3;
            element2.type = "text"; 
            cell3.appendChild(element2); 
  
        } 
  
        function deleteRow(tableID) { 
            try { 
            var table = document.getElementById(tableID); 
            var rowCount = table.rows.length; 
			var columnCount = table.cells.length; 			
  
            for(var i=0; i<rowCount; i++) { 
                var row = table.rows[i]; 
                var chkbox = row.cells[0].childNodes[0]; 
				
                if(null != chkbox && true == chkbox.checked) { 
                    table.deleteRow(i); 
                    rowCount--; 
                    i--; 
                } 
  
            } 
            }catch(e) { 
                alert(e); 
            } 
        } 
		function hideRow(tableID) { 
            try { 
				var table = document.getElementById(tableID); 
				var rowCount = table.rows.length; 
				
				var rowPos = document.getElementById("txtRowPos").value;
				var colPos = document.getElementById("txtColPos").value;
				
				for(var i=1; i<rowCount + 1; i++) 
				{ 				
					var row = table.rows[i - 1]; 				
					var cellCount = row.cells.length;;				
					for(var j=1; j<cellCount + 1; j++) 
					{ 
						if(i==rowPos && j==colPos)
						{
							if(document.getElementById('txt' + i + j))
							{
								document.getElementById('txt' + i + j).style.display = "none";
							}
							else
							{
								alert("Invalid Position");
							}
						}						
					}
					/*
					var row = table.rows[i]; 
					var chkbox = row.cells[0].childNodes[0]; 
					if(null != chkbox && true == chkbox.checked) { 
						table.deleteRow(i); 
						rowCount--; 
						i--; 
					} 
					*/
				}
            } 
            catch(e) { 
                alert(e); 
            } 
        } 
  
    </SCRIPT> 
</HEAD> 
<BODY> 
  
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
	<br/>
	Row Position:<INPUT id="txtRowPos" type="text" style="width:30px" />
	Column Position: <INPUT id="txtColPos" type="text" style="width:30px" />
	<INPUT type="button" value="Hide Row" onclick="hideRow('dataTable')" /> 
    <TABLE id="dataTable" width="350px" border="1"> 
        <TR> 
            <TD><INPUT type="checkbox" name="chk"/></TD> 
            <TD> 1 </TD> 
            <TD> <INPUT id="txt13" type="text" /> </TD> 
        </TR> 
    </TABLE> 
  
  
  
</BODY> 
</HTML>

Open in new window

0
 
ProculopsisCommented:

jQuery can be your friend:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26971769.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("input[type=button]").click( remove );

});

function remove() {
  var position = eval( $(this).val() );
  var row = position[0];
  var column = position[1];
  var cell = $("#my-table tr").eq(row).find("td").eq(column);
  $("input",cell).hide();
}

</script>
</head>
<body>

<table id="my-table" border="1">
<tr><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td></tr>
</table>

<br />
<input type="button" value="[0,0]" />
<input type="button" value="[0,1]" />
<input type="button" value="[0,2]" />
<br />
<input type="button" value="[1,0]" />
<input type="button" value="[1,1]" />
<input type="button" value="[1,2]" />
<br />
<input type="button" value="[2,0]" />
<input type="button" value="[2,1]" />
<input type="button" value="[2,2]" />

</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dshrenikAuthor Commented:
@Proculopsis:
Could you give a brief description for your code?
Thanks!
0
 
dshrenikAuthor Commented:
I don't want to remove a textbox, I just want to hide it.
The data in it should not be lost.
0
 
ProculopsisCommented:

It is being hidden and this version makes it a bit clearer with the button doing show/hide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_26971769.html#a35446694</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("input[type=button]").click( eventClick );

});

function eventClick() {
  var position = eval( $(this).val() );
  var row = position[0];
  var column = position[1];
  hide( row, column );
}

function hide( row, column ) {
  var cell = $("#my-table tr").eq(row).find("td").eq(column);
  $("input",cell).toggle();
}

</script>
</head>
<body>

<table id="my-table" border="1">
<tr><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td></tr>
</table>

<br />
<input type="button" value="[0,0]" />
<input type="button" value="[0,1]" />
<input type="button" value="[0,2]" />
<br />
<input type="button" value="[1,0]" />
<input type="button" value="[1,1]" />
<input type="button" value="[1,2]" />
<br />
<input type="button" value="[2,0]" />
<input type="button" value="[2,1]" />
<input type="button" value="[2,2]" />

</body>
</html>

Open in new window

0
 
dshrenikAuthor Commented:
Is it possible do this based on the textbox ID? Say my textbox ID is "tID", how do I write this code?
0
 
ProculopsisCommented:

That's a bit easier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_26971769.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("input[type=button]").click( eventClick );

});

function eventClick() {
  var Id = "#" + $(this).val();
  $(Id).toggle();
}

</script>
</head>
<body>

<table id="my-table" border="1">
<tr><td><input id="a" /></td><td><input id="b" /></td><td><input id="c" /></td></tr>
<tr><td><input id="d" /></td><td><input id="e" /></td><td><input id="f" /></td></tr>
<tr><td><input id="g" /></td><td><input id="h" /></td><td><input id="i" /></td></tr>
</table>

<br />
<input type="button" value="a" />
<input type="button" value="b" />
<input type="button" value="c" />
<br />
<input type="button" value="d" />
<input type="button" value="e" />
<input type="button" value="f" />
<br />
<input type="button" value="g" />
<input type="button" value="h" />
<input type="button" value="i" />

</body>
</html>

Open in new window

0
 
dshrenikAuthor Commented:
I'm a little confused.
Does $(this).val() return the ID of the textbox?
0
 
Tom BeckCommented:
Before you go crazy with the client side script, try changing your original code:

var textbox = document.getElementById(id);
textbox.style.display = "none";

To this:

var textbox = document.getElementById(id);
textbox.style.visibility = "hidden";

Visibility hidden hides the rendered element. Display none will prevent the element from rendering at all.
0
 
dshrenikAuthor Commented:
@tommyBoy:
How do I set it to visible again?
0
 
Tom BeckCommented:
Using javascript?

var textbox = document.getElementById(id);
textbox.style.visibility = "visible";

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now