CodingForums.com - Include Checkboxes in an html table

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Include Checkboxes in an html table (http://www.codingforums.com/showthread.php?t=275723)

Include Checkboxes in an html table

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.

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>

Hi shyagrawal

Thanks a lot. It is working.

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 .