...

View Full Version : adding rows to a table



ibolui
05-28-2005, 12:07 PM
hi, is it possible to add row to a existing table when user checked a checked box?

say i got a form with 3 checkboxes and a table with 0 rows initially. when user checked a box(or more), can i write a javascript to add a rows(or more) to the table? likewise when user unchecked a checked box, can i write a javascript to delete the corresponding row?


<input type=checkbox name=one value=1.00>
<input type=checkbox name=two value=2.00>
<input type=checkbox name=three value=3.00>

<table border="0" cellpadding="3" cellspacing="1" width="100%">
<tr>
<th colspan=2>test table</th>
</tr>
//rows to be added here
</table>

looka
05-28-2005, 12:42 PM
it would probably be possible using innerHTML of that table. (document.getElementById('mytableId').innerHTML+='<tr></tr>';

but im not shure how to manipulate with cells. (col, rowspans)

ibolui
05-28-2005, 02:32 PM
i found this http://www.mredkj.com/tutorials/tableaddrow.html

works well. but to be able to change the text of the cell, use cellLeft.innerHTML=msg instead :)

vwphillips
05-28-2005, 03:38 PM
see also

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f2

f22 and f23 are also relavent

the DOM can also be used to change elements in the rows/cells including text Nodes

let me know if you want some

thing customised

ibolui
05-28-2005, 05:03 PM
yeah. would like some advice...

say i have a dropdown of categories. each category has some items and these items each has a checkbox. i managed to get the script to work such that table rows can be added and deleted when user checked or unchecked the boxes. but i realised that these changes are not 'permanent', in the sense that when user choose another category, the previous items he has choosed are gone.

i am thinking of using javascript to write the items to a cookie. is this right?

vwphillips
05-28-2005, 06:45 PM
sounds similar to f23 script on the link above

with items selected not searched

have you looked at f23?


with the script above all table rows are retained in an array and moved to and from the tables as required.

the source table could be hidden or even deleted once the page has loaded

how permenent do you want it,

a cookie would be nessassary if you required the last selections displayed when coming back to the page. This is doable and have script to demonstrate the principles

Willy Duitt
05-28-2005, 07:22 PM
http://www.webdeveloper.com/forum/showthread.php?t=67681

CrAzY_J
05-28-2005, 08:08 PM
why not use insertRow()

ibolui
05-28-2005, 09:53 PM
i got a problem using javascripts in ie6, but they work fine in firefox and netscape. the problem is that when there are many checkboxes ticked, everything seems no longer to work properly. and i will get auto logout (i am writing these in phpbb)
below is the code. can someone help??


function add(temp1, temp2, temp3, temp4, temp5) {
var id = temp4+"@"+selection+"@"+temp2_name+"@"+temp5+"@"+temp1;
var count = getCookie("count");

if (count == null) {
// add to cookie
setCookie("count", 1);
setCookie("add1id", id);
setCookie("add1box", temp4+temp2);
}
else {
count = parseInt(count);
for (var i=1;i<=count;i++) {
if (id == getCookie("add"+i+"id")) {
alert("You have already added this");
var box = document.getElementById(temp4+temp2);
box.checked = 1;
return;
}
}

// not added before
count = count+1;
setCookie("count", count);
setCookie("add"+count+"id", id);
setCookie("add"+count+"box", temp4+temp2);
var count = getCookie("count");
}
}


function populate() {
var count = getCookie("count");
var box;
for (var i=0;i<=count;i++) {
box = getCookie("add"+i+"box");
if (box != null) {
box = document.getElementById(box);
if (box != null) box.checked = 1;
}
}
}


function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}


function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}


function setCookie(name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}


function delCookie(name) {
exp = new Date();
exp.setTime(exp.getTime() - (24*60*60*1000));
var cval = getCookie(name);
cval = (cval == null) ? "" : cval;
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum