/    Sign up×
Community /Pin to ProfileBookmark

create a row using checkboxes

Im trying to figure out how to use checkboxes to add rows (up to five) to an existing table, heres the html,

[code=html]
<form name=”myform”>
Row 1 <input type=”checkbox” name=”check_list” onClick=”addRow(1)”><br>
Row 2 <input type=”checkbox” name=”check_list” onClick=”addRow(3)”><br>
Row 3 <input type=”checkbox” name=”check_list” onCheck=”addRow(3)”><br>
Row 4 <input type=”checkbox” name=”check_list” onCheck=”addRow(4)”><br>
Row 5 <input type=”checkbox” name=”check_list” onCheck=”addRow(5)”><br>
<button type=”button”onClick=”CheckAll(document.myform.check_list)”>Check All</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type=”button” onClick=”UnCheckAll(document.myform.check_list)”>Unheck All</button>
</form>
<table id=”dynamo” align=”center” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<th>&nbsp;</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
[/code]

heres the function to create the row

[CODE]
function addRow(x)
{
var mytable = document.getElementById(“dynamo”);

var row=document.createElement(“tr”);
var col1=document.createElement(“td”);
var rowcount=document.createTextNode(“Row “+x);
var col2=document.createElement(“td”);
var col3=document.createElement(“td”);
var col4=document.createElement(“td”);

col1.appendChild(rowcount);

mytable.appendChild(row);
mytable.appendChild(col1);
mytable.appendChild(col2);
mytable.appendChild(col3);
mytable.appendChild(col4);
}
[/CODE]

I’m trying to get all the borders to show (even the tds with no content)
Also, im trying to toggle the rows, so if the box isn’t checked the row goes away.
[ATTACH]16159[/ATTACH]
Thanks…

[canned-message]attachments-removed-during-migration[/canned-message]

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@lukeurtnowskiauthorJun 06.2014 — ok, made some headway on this beasrt, Now the checkboxes add/delete the row. When the page loads, all the boxes are checked and all 5 rows can be seen. The problem now is that when I press the uncheck all button (only the 4th row is deleted. What am I doing wrong? Shouldn't they all go asway?

Heres my Javascript
<i>
</i>&lt;SCRIPT LANGUAGE="JavaScript"&gt;
function isChecked(x)
{
var checkbox = document.getElementById("box"+x);

if(checkbox.checked){
addRow(x);
} else {
deleteRow(x);
}
}
function addRow(x)
{

var mytable = document.getElementById("dynamo");

var row = mytable.insertRow(1);
row.setAttribute('id','row'+x);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "Row "+x;
}
function deleteRow(x)
{
var row = document.getElementById("row"+x);

row.deleteCell(0);
row.deleteCell(0);
row.deleteCell(0);
row.deleteCell(0);
mytable.deleteRow(x);
}
function CheckAll(chk)
{
for (i = 0; i &lt; chk.length; i++)
chk[i].checked = true ;
for(var x = 1;x &lt;= 5; x++)
{
addRow(x);
}
}

function UnCheckAll(chk)
{
for (i = 0; i &lt; chk.length; i++)
chk[i].checked = false ;
for(var x = 4;x &gt;= 0; x--)
{
deleteRow(x);
}

}
&lt;/script&gt;


Heres my HTML
[code=html]
<body onload="CheckAll(document.myform.check_list)">
<form name="myform">
Row 1 <input type="checkbox" name="check_list" id="box1" onClick="isChecked(1)"><br>
Row 2 <input type="checkbox" name="check_list" id="box2" onClick="isChecked(2)"><br>
Row 3 <input type="checkbox" name="check_list" id="box3" onClick="isChecked(3)"><br>
Row 4 <input type="checkbox" name="check_list" id="box4" onClick="isChecked(4)"><br>
Row 5 <input type="checkbox" name="check_list" id="box5" onClick="isChecked(5)"><br>
<button type="button"onClick="CheckAll(document.myform.check_list)">Check All</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" onClick="UnCheckAll(document.myform.check_list)">Unheck All</button>
</form>
<table id="dynamo" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>&nbsp;</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>


</body>
[/code]

[ATTACH]16161[/ATTACH][ATTACH]16163[/ATTACH]

Thanks...

[canned-message]attachments-removed-during-migration[/canned-message]
Copy linkTweet thisAlerts:
@007JulienJun 06.2014 — It would be better to display two buttons to add a row (its disappear with the 5th row) or to delete a row (if any) of your table...
Copy linkTweet thisAlerts:
@JMRKERJun 06.2014 — If you already know the contents of the table rows to display,

it would seem easier to control if you did something like this...

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;

&lt;title&gt; Add/Remove Table Rows &lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form name="myform"&gt;
&lt;fieldset id="check_list" style="width:20%"&gt;
&lt;legend&gt; Check List &lt;/legend&gt;
Row 1 &lt;input type="checkbox" onclick="setreset('row0',this.checked)"&gt;&lt;br&gt;
Row 2 &lt;input type="checkbox" onclick="setreset('row1',this.checked)"&gt;&lt;br&gt;
Row 3 &lt;input type="checkbox" onclick="setreset('row2',this.checked)"&gt;&lt;br&gt;
Row 4 &lt;input type="checkbox" onclick="setreset('row3',this.checked)"&gt;&lt;br&gt;
Row 5 &lt;input type="checkbox" onclick="setreset('row4',this.checked)"&gt;&lt;br&gt;
&lt;button type="button"onclick="CheckList('check_list',true)"&gt;Check All&lt;/button&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;button type="button" onclick="CheckList('check_list',false)"&gt;Unheck All&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;

&lt;table id="dynamo" align="center" border="0" cellpadding="0" cellspacing="0" width="20%"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&amp;nbsp;&lt;/th&gt;
&lt;th&gt;Column 1&lt;/th&gt;
&lt;th&gt;Column 2&lt;/th&gt;
&lt;th&gt;Column 3&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;

&lt;tbody&gt;
&lt;tr id="row0"&gt; &lt;th&gt;Row 1&lt;/th&gt; &lt;th&gt;1/1&lt;/th&gt; &lt;th&gt;1/2&lt;/th&gt; &lt;th&gt;1/3&lt;/th&gt; &lt;/tr&gt;
&lt;tr id="row1"&gt; &lt;th&gt;Row 2&lt;/th&gt; &lt;th&gt;2/1&lt;/th&gt; &lt;th&gt;2/2&lt;/th&gt; &lt;th&gt;2/3&lt;/th&gt; &lt;/tr&gt;
&lt;tr id="row2"&gt; &lt;th&gt;Row 3&lt;/th&gt; &lt;th&gt;3/1&lt;/th&gt; &lt;th&gt;3/2&lt;/th&gt; &lt;th&gt;3/3&lt;/th&gt; &lt;/tr&gt;
&lt;tr id="row3"&gt; &lt;th&gt;Row 4&lt;/th&gt; &lt;th&gt;4/1&lt;/th&gt; &lt;th&gt;4/2&lt;/th&gt; &lt;th&gt;4/3&lt;/th&gt; &lt;/tr&gt;
&lt;tr id="row4"&gt; &lt;th&gt;Row 5&lt;/th&gt; &lt;th&gt;5/1&lt;/th&gt; &lt;th&gt;5/2&lt;/th&gt; &lt;th&gt;5/3&lt;/th&gt; &lt;/tr&gt;

&lt;/tbody&gt;
&lt;/table&gt;

&lt;script type="text/javascript"&gt;

function CheckList(IDS,flag) {
var sel = document.getElementById(IDS).getElementsByTagName('input');
for (var i=0; i&lt;sel.length; i++) {
sel[i].checked = flag;
if (flag) { document.getElementById('row'+i).style.display = ''; }
else { document.getElementById('row'+i).style.display = 'none'; }

}
}

function setreset(IDS,flag) {
if (flag) { document.getElementById(IDS).style.display = ''; }
else { document.getElementById(IDS).style.display = 'none'; }
}

window.onload = function() {
CheckList('check_list',true);
setreset('check_list',true);
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@lukeurtnowskiauthorJun 06.2014 — thanks Jimmer, it works, but im trying to understand your code, can you explain it?
Copy linkTweet thisAlerts:
@JMRKERJun 06.2014 — Sure,

The HTML is just that. Nothing special other than adding a unique ID value for each row.

The onclick in each checkbox calls on the setreset() function in the JS function described below.

The <body onload=...> is replaced by the "window.onload = function() ..." on startup.

The JS has only two functions: CheckList() and setreset().

Each used the same parameters passed.

The IDS relates to the unique row ids in each <tr> tag of the table.

The setreset() function just changes the CSS display parameter for each IDS specified.

The flag parameter is just true or false depending upon the checkbox.checked value.

The CheckList() function just collect all the <input...> tags in the variable 'sel'

'sel' is SIMILAR to an array, but in this context is called a collection.

Each 'sel' points to each of the <input type="checkbox" ...>s in the <fieldset> tag.

Again, CSS parameters are set (true) or reset (false), depending upon the 'flag' setting passed.

Let me know if that is not clear enough.

You should be able to google each of the commands for further explanations,

but speak up if you continue to have problems
Copy linkTweet thisAlerts:
@shophiarajan47Jun 06.2014 — IT's all the Javascript that has been used to render what you want to.

The script will call the proper button as they are in, with function. The parameter id will control which button has been pressed while the flag let them enable and disable. Easy to understand!
Copy linkTweet thisAlerts:
@thevags12Jun 07.2014 — <table>

<ul>

<li> Name></li>

<li class></li>

</ul>

<li>Ram</li>

<li>BCA</li>

</ul>

<table>

</table>

this is also a method to create a row in table ....

[COLOR="#F0FFFF"]website designing company in india[/COLOR][COLOR="#F0FFFF"] |[/COLOR] [COLOR="#FFFFFF"]website development company in india[/COLOR]
×

Success!

Help @lukeurtnowski spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...