Include Checkboxes in an html table

xaverian · 10-08-2012, 10:55 AM

Hi ,
I have the following html table. My requirement is if I click on '[Switch into edit mode]", it will introduce some checkboxes in the table rows so that I can select them.

Code:

<html>
<TABLE BORDER=0 BGCOLOR="#F5F5F5">
<a href="coll.pl?filter=gui&amp;query=flow2&amp;mode=del">[Switch into edit mode]<br></a>

<TR><TD>o</TD><TD><a href="coll.pl?path=/home/default/units/results">Regression 3.2</a></TD><TD><a href="collstat.pl?path=/home/default/units/results">(/home/default/units/results)</a></TD></TR>
<TR><TD>o</TD><TD><a href="coll.pl?path=/home/micado/units/results">Regression 3.3</a></TD><TD><a href="collstat.pl?path=/home/micado/units/results">(/home/micado/units/results)</a></TD></TR>
<TR><TD>o</TD><TD><a href="coll.pl?path=/home/pll/dss/top">Regression pll</a></TD><TD><a href="collstat.pl?path=/home/pll/dss/top">(/home/pll/dss/top)</a></TD></TR>
</TABLE>

</html>

You can delete the <a href coll.pl > stuff in [Switch into edit mode] and replace that with a javascript function to accomplish the requirement. The desired table should exactly look like below :

Code:

<html>
<TABLE BORDER=0 BGCOLOR="#F5F5F5">


<TR><TD>o</TD><TD><a href="coll.pl?path=/home/default/units/results">Regression 3.2</a></TD><TD NOWRAP><label><input type="checkbox" name="DEL=/home/default/units/results" value="on" /> Remove</label></TD><TD><a href="collstat.pl?path=/home/default/units/results">(/home/default/units/results)</a></TD></TR>
<TR><TD>o</TD><TD><a href="coll.pl?path=/home/micado/units/results">Regression 3.3</a></TD><TD NOWRAP><label><input type="checkbox" name="DEL=/home/micado/units/results" value="on" /> Remove</label></TD><TD><a href="collstat.pl?path=/home/micado/units/results">(/home/micado/units/results)</a></TD></TR>
<TR><TD>o</TD><TD><a href="coll.pl?path=/home/pll/dss/top">Regression pll</a></TD><TD NOWRAP><label><input type="checkbox" name="DEL=/home/pll/dss/top" value="on" /> Remove</label></TD><TD><a href="collstat.pl?path=/home/pll/dss/top">(/home/pll /dss/top)</a></TD></TR>
</TABLE>

</html>

Please help. Thanks.

shyagrawal · 10-08-2012, 01:37 PM

This is the code that you are searching.

Code:

<html>
<head>
<script>
	function addCheckBox() {
	
		var table = document.getElementById("table1"); 
		for (var i = 0, row; row = table.rows[i]; i++) { 	
			var x=row.insertCell(2);
			 x.innerHTML="<label><input type=\"checkbox\" name=\"DEL=/home/default/units/results\" value=\"on\" /> Remove</label>";		      
		}
	}
</script>
</head>
<body>
<TABLE BORDER=0 BGCOLOR="#F5F5F5" id="table1">
<a href="javascript:addCheckBox();">[Switch into edit mode]<br></a>
<TR><TD>o</TD><TD><a href="coll.pl?path=/home/default/units/results">Regression 3.2</a></TD><TD><a href="collstat.pl?path=/home/default/units/results">(/home/default/units/results)</a></TD></TR>

<TR><TD>o</TD><TD><a href="coll.pl?path=/home/micado/units/results">Regression 3.3</a></TD><TD><a href="collstat.pl?path=/home/micado/units/results">(/home/micado/units/results)</a></TD></TR>

<TR><TD>o</TD><TD><a href="coll.pl?path=/home/pll/dss/top">Regression pll</a></TD><TD><a href="collstat.pl?path=/home/pll/dss/top">(/home/pll/dss/top)</a></TD></TR>

</TABLE>
</body>
</html>

xaverian · 10-09-2012, 10:47 AM

Hi shyagrawal

Thanks a lot. It is working.

xaverian · 10-09-2012, 12:45 PM

Hi shyagrawal,

Is it possible to include a NOWRAP to that cell We included. I mean to say something like :

Code:

<TD NOWRAP><label><input type="checkbox" name="DEL=/home/units/clock" value="on" /> Remove</label></TD>

Thanks .