...

View Full Version : Include Checkboxes in an html table



xaverian
10-08-2012, 11: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.


<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 :


<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, 02:37 PM
This is the code that you are searching.


<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, 11:47 AM
Hi shyagrawal

Thanks a lot. It is working.

xaverian
10-09-2012, 01:45 PM
Hi shyagrawal,

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


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


Thanks .



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum