Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding rows to a table

    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>
    Last edited by ibolui; 05-28-2005 at 04:04 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by ibolui; 05-28-2005 at 01:55 PM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    see also

    http://www.vicsjavascripts.org.uk/Fo...pendium.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

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #8
    Regular Coder
    Join Date
    May 2005
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why not use insertRow()

  • #9
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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??

    Code:
    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();
    }
    Last edited by ibolui; 05-30-2005 at 09:32 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •