View Full Version : Dynamically creating elements inside a table

01-20-2012, 04:11 AM
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?

<input type="text" id="rejectName" />
<select id="divSelectReason">
<option value="" selected="true">Enter Rejection Reason</option>
<cfoutput query="queryReasonReturn">
<textarea id="editReason" cols="30"></textarea>
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.

Old Pedant
01-20-2012, 06:38 AM
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?

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

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.)

01-22-2012, 08:11 AM
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...

<script type="text/javascript">
var nextRowId = 2;
// 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