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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post

    Dynamically add row to table

    Hi guys. I posted a similar question in the html forum, but realised I needed javascript for this. I have also checked out many examples of similar things online, but they all seem to clone the whole table. Basically, I have a simple table with rows like this
    Code:
    <table class="table1">
      <tr>
        <td class="title">1:</td>
        <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
        <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
        <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
      </tr>
    
      <tr>
        <td class="title">2:</td>
        <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
        <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
        <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
      </tr>
    </table>
    What I will do is add a button to add a new row. When clicked, I am not looking to add the whole table, just the tr and whats inside of it e.g.
    Code:
    <tr>
        <td class="title">2:</td>
        <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
        <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
        <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
      </tr>
    Is something like this possible? As I say, the examples I have seen so far tend to clone a table rather than a row. Any advise appreciated.

    Cheers

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Cloning and/or dynamically creating the row, tds, inputs, etc., is possible, but because there is quite a lot of content it will be more efficient to make use of innerHTML. I threw this together:

    Code:
    var stdContent = "<td class='title'>xx:</td>" +
        "<td><input type='text' placeholder='Giving' class='selector' name='givingxx' autocomplete='off'/></td>" +
        "<td><input type='text' placeholder='Getting' class='selector' name='gettingxx' autocomplete='off'/></td>" +
        "<td><input type='text' name='popupdatexx' id='popupdatexx' class='popupdate' value='When' /></td>";
    
    var newrow = document.createElement('tr');
    // give your table an id..
    var theTable = document.getElementById('tableid');
    var newno;
    newno = 3;  // increment at some point
    theTable.appendChild(newrow);
    var newcontent = stdContent.replace('xx', newno);
    newrow.innerHTML = newcontent;
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    nick2price (09-24-2012)

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You might (scrub that, will!) need

    Code:
    var newcontent = stdContent.replace(/xx/g, newno);
    to perform a global replace: it's late at night and I can't recall if replace() only replaces the first occurrence by default.
    Last edited by AndrewGSW; 09-24-2012 at 01:16 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    nick2price (09-24-2012)

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You can include line breaks if you want the HTML to look presentable:

    Code:
    var stdContent = "<td class='title'>xx:</td>\n" +
        "<td><input type='text' placeholder='Giving' class='selector' name='givingxx' autocomplete='off'/></td>\n" +
        "<td><input type='text' placeholder='Getting' class='selector' name='gettingxx' autocomplete='off'/></td>\n" +
        "<td><input type='text' name='popupdatexx' id='popupdatexx' class='popupdate' value='When' /></td>\n";
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    nick2price (09-24-2012)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Kool, thanks for the replies. To neaten things up, I have placed the code into a function. I then placed the global replace at the top of the function is it just a case of passing the function the variable e.g.
    Code:
    function addTableRow(var newno){
    var newcontent = stdContent.replace(/xx/g, newno);
    
    var stdContent = "<td class='title'>xx:</td>" +
        "<td><input type='text' placeholder='Giving' class='selector' name='givingxx' autocomplete='off'/></td>" +
        "<td><input type='text' placeholder='Getting' class='selector' name='gettingxx' autocomplete='off'/></td>" +
        "<td><input type='text' name='popupdatexx' id='popupdatexx' class='popupdate' value='When' /></td>";
    
    var newrow = document.createElement('tr');
    // give your table an id..
    var theTable = document.getElementById('tableid');
    var newno;
    newno = 3;  // increment at some point
    theTable.appendChild(newrow);
    var newcontent = stdContent.replace('xx', newno);
    newrow.innerHTML = newcontent;
    
    }
    And then where I have the original table, if I have a button for instance, just call the function like so?
    Code:
    <INPUT type="button" value="Add Row" onclick="addTableRow('4')" />
    Last edited by nick2price; 09-24-2012 at 03:59 PM.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Hi guys. Still havnt managed to work out why this isnt working. I dont pass it a variable anymore, just call then function onclick, but no row seems to be added.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <!DOCTYPE html>
    <html lang="en-GB">
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="key, words">
        <meta name="description" content="description">
        <title>Some Title</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    <input type="button" value="Add Row" onclick="addTableRow()">
    <table id="tableid">
        <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr>
    </table>
    <script type="text/javascript">
    var stdContent = "<td class='title'>xx:</td>\n" +
        "<td><input type='text' placeholder='Giving' class='selector' name='givingxx' autocomplete='off'/></td>\n" +
        "<td><input type='text' placeholder='Getting' class='selector' name='gettingxx' autocomplete='off'/></td>\n" +
        "<td><input type='text' name='popupdatexx' id='popupdatexx' class='popupdate' value='When' /></td>\n";
    var newno = 3;
    function addTableRow() {
        var newrow = document.createElement('tr');
        // give your table an id..
        var theTable = document.getElementById('tableid');
        
        theTable.appendChild(newrow);
        var newcontent = stdContent.replace('xx', newno);
        newrow.innerHTML = newcontent;
        newno++;
    }
    
    </script>
    </body>
    </html>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    nick2price (09-24-2012)

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Brilliant, exactly what I was looking for. I have discovered a new problem though which hopefully you can advise on. This form is loaded through a link
    Code:
    <a href="#login-box" class="login-window">More</a>
    What this does is call the following javascript
    Code:
    $(document).ready(function() {
    	$('a.login-window').click(function() {
            //Getting the variable's value from a link 
    		var loginBox = $(this).attr('href');
    		//Fade in the Popup
    		$(loginBox).fadeIn(300);
    		//Set the center alignment padding + border see css style
    		var popMargTop = ($(loginBox).height() + 24) / 2; 
    		var popMargLeft = ($(loginBox).width() + 24) / 2; 
    		
    		$(loginBox).css({ 
    			'margin-top' : -popMargTop,
    			'margin-left' : -popMargLeft
    		});
    		
    		// Add the mask to body
    		$('body').append('<div id="mask"></div>');
    		$('#mask').fadeIn(300);
    		
    		return false;
    	});
    	
    	// When clicking on the button close or the mask layer the popup closed
    	$('a.close, #mask').live('click', function() { 
    	  $('#mask , .login-popup').fadeOut(300 , function() {
    		$('#mask').remove();  
    	}); 
    	return false;
    	});
    });
    Essentially, it darkens out the background and displays the table in the foreground, just like a modal display. The problem I am having relates to the new rows. When new rows are added, I cant scroll down to see them. If I use the browsers scrollbar, it scrolls my website, not the table. I would imagine this happens because the rows are added after the modal display is created, therefore the height becomes messed up. Is there any way to add a scrollbar or something to the table, or to get it to automatically update the modal display?

    Cheers

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Without further information I assume you can just add the css-rule overflow:scroll or overflow:auto to the box: I'm assuming it has a fixed height. auto is probably preferable.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    nick2price (09-25-2012)

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Think you are right. The css for the table is
    Code:
    .login-popup{
    	display:none;
    	padding: 10px; 	
    	float: left;
    	font-size: 1.2em;
    	position: fixed;
    	top: 50%; left: 50%;
    	z-index: 99999;
    }
    So the fixed position is causing the problem. Adding an overflow:auto or scroll doesnt seem to work, but I can probably come up with a solution by changing the position type.

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Hey, one last quick thing. To remove rows, I added the following code
    Code:
    var rws;
    function deleteTableRow(obj){
     obj=document.getElementById(obj);
     rws=obj.getElementsByTagName('tr');
     obj.removeChild(rws[rws.length-1]);
    }
    It seems to work, does it look ok? For some reason, it only deletes the dynamically added rows, and wont delete the ones in the table from the beginning. This is fine, but I wouldnt mind knowing why this is the case though.

    Cheers

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Nick, I see that you are using jQuery. If you’re already loading such a lot of code then at least make full use of it. jQuery has a clone() function to easily clone nodes (and modify them before reinserting them into the document). And also, it’s terribly easy to remove nodes.

  • Users who have thanked VIPStephan for this post:

    nick2price (09-25-2012)

  • #13
    New Coder
    Join Date
    Nov 2010
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts
    This is just what I've been looking for! Thanks :-)

    However (using AndrewGSW's latest code), does anyone know how to do the following:

    1: Show 3 rows (with form fields) by default.
    2: Only permit a maximum of 10 rows to be added.
    Last edited by css-quest; 09-25-2012 at 01:00 PM.

  • #14
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    1. Just have three rows to start with.
    2.

    Code:
    var tbl = document.getElementById('yourtableid');
    if (tbl.rows.length < 10) {
        // adjust the number 10 to account for any header row
        // and perhaps the additional row containing the Add button
        // code to add a new row here
    }
    You asked a third question by PM about having the Add button in a last row. In which case you need to use insertBefore to insert the new row(s) before this last one:

    Code:
    tbl.insertBefore(newrow, tbl.rows[tbl.rows.length-1]);
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • The Following 2 Users Say Thank You to AndrewGSW For This Useful Post:

    css-quest (09-27-2012), nick2price (09-26-2012)

  • #15
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    I realised that I needed to limit the amount of rows which could be added, but I done it slightly differently. I took the count variable and done
    Code:
    if(newno>20){
    	alert("Max row limit");
    	return;
    }
    It seems to work, is it ok doing this? (I have it in the addRow function).

    Another question I have relates to automation. This may be slightly more difficult. As you can see, the last field in each row is a calander. What I would like to attempt is to have a row added automatically if the calander of the last row has a value. So, on the original table, the calandar in the fourth row will be trigger. If new rows are added, the new last row's calandar would become the new trigger. Is something like this possible?

    Nick


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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