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 3 of 3
  1. #1
    Registered User
    Join Date
    Jan 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Dynamically creating elements inside a table

    Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea).

    Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?!

    This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this?
    Code:
    <tr>
    	<td>
    		<input type="text" id="rejectName" />
    	</td>
    	<td>
    		<select id="divSelectReason">
    			<option value="" selected="true">Enter Rejection Reason</option>
    			<cfoutput query="queryReasonReturn"> 
    				<option>#codeAndReason#</option>
    			</cfoutput>
    		</select>
    	</td>
    	<td>
    		<textarea id="editReason" cols="30"></textarea>
    	</td>
    </tr>
    Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element.
    Last edited by ColdSpring; 01-20-2012 at 03:13 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    First of all, if you only give id's to fields, then your server-side code WILL NOT SEE the form fields.

    ONLY fields with NAMEs are sent back to the server.

    If ColdFusion takes an id and duplicates it as a name, then of course that will work (that's what ASP.NET does), but otherwise, you need to add the names yourself.

    The other problem her is that your list of <option>s is generated by ColdFusion code. So if we simply create a <select> in the DOM, where will thos <option>s come from?

    Probably the best technique, then is to indeed clone the <tr> row, changing the names along the way as you suggested.

    For consistency's sake, I'd make the first row have fields numbered 1, instead of lacking numbers. It should make processing the data in your CF serverside code easier.

    Doing all this using ordinary JS--without jQuery is not hard at all. Moderately tedious, but not hard. But if you know what the fields need to look like--excepting for the <option>s--then why not just hand code it?

    Code:
    var rowCount = 1;
    
    function addRow( toTableId )
    {
        var table = document.getElementById( toTableId );
        var row1 = table.rows[0]; // assuming it is first row...adjust the number as needed
    
        ++rowCount;
        var row = document.createElement("tr");
    
        var td1 = document.createElement("td");
        var inp = document.createElement("input");
        inp.name = "rejectName" + rowCount;
        td1.appendChild( inp );
        row.appendChild( td1 );
    
        var td2 = document.createElement("td");
        var sel = document.createElement("select");
        sel.name = "divSelectReason" + rowCount;
        
        var selOld = document.forms[0].divSelectReason1;
        for ( var o = 0; o < selOld.options.length; ++o )
        {
            optOld = selOld.options[o];
             sel.options[o] = new Option( optOld.text, optOld.value );
        }
        td2.appendChild( sel );
        row.appendChild( td2 );
    
        var td3 = document.createElement("td");
        var ta = document.createElement("textarea");
        ta.name = "editReason" + rowCount;
        ta.columns = 10;
        td3.appendChild( ta );
        row.appendChild( td3 );
    
        table.appendChild( td3 )
    }
    Something along those lines, at least. (I think maybe you have to use the tbody with appendChild for adding a <tr> to a <table>. Been too long since I did it. But try it.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Registered User
    Join Date
    Jan 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Is there a way to loop through the dropdown via jQuery? I'm guessing using the .each() method? I also would like to have whatever option is selected to show up in the textarea (so the user can edit it). Not really sure on how to go about that.

    This is what I have so far...

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	var nextRowId = 2;
    	$('#AddRow').click(function(){
    		// create new row
    		$('<tr />').attr('id', 'newInsertDrug' + nextRowId).appendTo('#dataTableBody');
    		
    		// create the first cell and input box for rejected drug name
    		$('<td />').attr('id', 'rejectDrugCell' + nextRowId).appendTo('#newInsertDrug' + nextRowId);
    		$('<input />').attr({'type':'text', 'id':'rejectDrugName' + nextRowId}).appendTo('#rejectDrugCell' + nextRowId);
    		
    		// create second cell with select/options.
    		$('<td />').attr('id', 'rejectReasonCell' + nextRowId).appendTo('#newInsertDrug' + nextRowId);
    		$('<select />').attr({'id':'selectReason' + nextRowId}).appendTo('#rejectReasonCell' + nextRowId);
    		// loop through the menu list, and attach the 
    		// currently selected option to the textarea so it can be edited
    		
    		// create third cell with textarea
    		$('<td />').attr('id', 'rejectTextAreaCell' + nextRowId).appendTo('#newInsertDrug' + nextRowId);
    		$('<textarea />').attr({'id':'rejectDrugName' + nextRowId, 'cols':'30', 'rows':'3'})
    			.appendTo('#rejectTextAreaCell' + nextRowId);
    		// increment nextRowId
    		nextRowId++;
    	});
    });
    </script>


  •  

    Posting Permissions

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