adding cfselect to dynamic table

[cdw0308]

I am trying to add a select box to my table that is populated from a query.

Here is my javascript code. The items in red is what I added but cannot make work. This code works if it is all just input boxes.

<script language="javascript"> 
function deleteIt(i) {
   var theTable = document.getElementById('table1');
   theTable.deleteRow(i);
   for (j = 0; j < theTable.rows.length; j++) {
      theTable.rows[j].cells[0].innerHTML = j + 1;
   }
   
   var rows=table1.rows
	for (var i=0;i<rows.length;i++) {
    	for (var j=1;j<rows[i].cells.length;j++) {    //j=0, no input element
        	rows[i].cells[j].getElementsByTagName("input")[0].setAttribute("name","txt"+j+"Row"+(i+1));
   		}
	}
    document.trans.total_count.value=table1.rows.length;  //Counts total lines in table
}

function addRow() 
{ 
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0]; 
var rows=table1.rows
var lastRow = table1.rows.length;
var iteration = lastRow + 1;
var row = document.createElement("TR"); 

var cell0 = document.createElement("TD");
var inp0 =  document.createTextNode(iteration);
cell0.appendChild(inp0); 
var cell1 = document.createElement("TD"); 
[COLOR=red]
var inp1 =  document.createElement("CFSELECT"); 
inp1.setAttribute("query","get_asset"); 
inp1.setAttribute("value","asset"); 
inp1.setAttribute("display","asset");
[/color]
inp1.setAttribute("name",'txt1Row' + iteration);
inp1.setAttribute("id",'txt1Row' + iteration);
cell1.appendChild(inp1); 
var cell2 = document.createElement("TD"); 
var inp2 =  document.createElement("INPUT"); 
inp2.setAttribute("type","text"); 
inp2.setAttribute("size","10"); 
inp2.setAttribute("value",""); 
inp2.setAttribute("name",'txt2Row' + iteration);
inp2.setAttribute("id",'txt2Row' + iteration);
cell2.appendChild(inp2); 
var cell3 = document.createElement("TD"); 
var inp3 =  document.createElement("INPUT"); 
inp3.setAttribute("type","text");
inp3.setAttribute("size","5"); 
inp3.setAttribute("value",""); 
inp3.setAttribute("name",'txt3Row' + iteration);
inp3.setAttribute("id",'txt3Row' + iteration);
cell3.appendChild(inp3);
var cell4 = document.createElement("TD"); 
var inp4 =  document.createElement("INPUT"); 
inp4.setAttribute("type","text");
inp4.setAttribute("size","10"); 
inp4.setAttribute("value",""); 
inp4.setAttribute("name",'txt4Row' + iteration);
inp4.setAttribute("id",'txt4Row' + iteration);
cell4.appendChild(inp4);
var cell5 = document.createElement("TD"); 
var inp5 =  document.createElement("INPUT"); 
inp5.setAttribute("type","text");
inp5.setAttribute("size","15"); 
inp5.setAttribute("value",""); 
inp5.setAttribute("name",'txt5Row' + iteration);
inp5.setAttribute("id",'txt5Row' + iteration);
cell5.appendChild(inp5);
var cell6 = document.createElement("TD"); 
var inp6 =  document.createElement("INPUT"); 
inp6.setAttribute("type","text");
inp6.setAttribute("size","15"); 
inp6.setAttribute("value",""); 
inp6.setAttribute("name",'txt6Row' + iteration);
inp6.setAttribute("id",'txt6Row' + iteration);
cell6.appendChild(inp6);
var cell7 = document.createElement("TD"); 
var inp7 =  document.createElement("INPUT"); 
inp7.setAttribute("type","text");
inp7.setAttribute("size","15"); 
inp7.setAttribute("value",""); 
inp7.setAttribute("name",'txt7Row' + iteration);
inp7.setAttribute("id",'txt7Row' + iteration);
cell7.appendChild(inp7);
var cell8 = document.createElement("TD"); 
var inp8 =  document.createElement("INPUT"); 
inp8.setAttribute("type","image"); 
inp8.setAttribute("src","images/delete.gif");
inp8.setAttribute("value","Delete"); 
inp8.onclick = function (){deleteIt(this.parentNode.parentNode.rowIndex);}
cell8.appendChild(inp8);

for (var i=0;i<rows.length;i++) {
    for (var j=1;j<rows[i].cells.length;j++) {    //j=0, no input element
        rows[i].cells[j].getElementsByTagName("input")[0].setAttribute("name","txt"+j+"Row"+(i+1));
    }
}
row.appendChild(cell0);
row.appendChild(cell1); 
row.appendChild(cell2); 
row.appendChild(cell3); 
row.appendChild(cell4);
row.appendChild(cell5); 
row.appendChild(cell6); 
row.appendChild(cell7); 
row.appendChild(cell8);
tbody.appendChild(row); 


document.trans.total_count.value=table1.rows.length;  //Counts total lines in table
//alert(row.innerHTML); 
} 
</script>

Here is my HTML Code

<table id="table1"> 
<tbody> 
<tr> 
<td>1</td>
<td><cfselect query="get_asset" width="15" name="txtRow1" display="asset" value="asset"></cfselect></td>
<td><input type="text" value="" size="10" name="txt2Row1"></td> 
<td><input type="text" value="" size="5" name="txt3Row1"></td> 
<td><input type="text" value="" size="10" name="txt4Row1"></td> 
<td><input type="text" value="" size="15" name="txt5Row1"></td> 
<td><input type="text" value="" size="15" name="txt6Row1"></td> 
<td><input type="text" value="" size="15" name="txt7Row1"></td> 
<td><input type="image" value="Delete" onclick="deleteIt(this.parentNode.parentNode.rowIndex)" src="images/delete.gif"></td>
</tr> 
</tbody> 
</table> 
<input type="hidden" name="total_count" value="1">
<input type="button" value="Insert Row" onClick="addRow();">
<input type="submit" value="Submit">

Any ideas on what i can do to make my combo box work?
I am getting the error
Error: 'cells[...].geElementsByTagName(...).0' is null or not an object

 

[trollacious]

You're mixing ColdFusion server side code with client-side HTML. There is no such HTML entity as a CFSELECT.

Lee

 

[cdw0308]

Ok,
Do you have any methods for creating a query based select tag in javascript?
I have a nice form created I just need the to be able to pick an item from a list on the dynamic table.
Any ideas?

 

[BillyRayPreachersSon]

If you have CF, you are better off doing all of this server-side. If not, you might find my FAQ, "How do I create multi-level select / list / drop down boxes?" (faq216-6294) a handy source of select element information you can copy/modify.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[j4606]

This isn't really a javascript question but you could try something like this. My syntax maybe off because i dont have a coldfusion server to test on.

HtmlAttributes = QueryNew("value, id");
QueryAddRow(Ref_GridSchemaRS, 3);

			QuerySetCell(HtmlAttributes, "Value", "input2",1);
			QuerySetCell(HtmlAttributes, "option", "input3", 1);

			QuerySetCell(HtmlAttributes, "Value", "input2",2);
			QuerySetCell(HtmlAttributes, "option", "input3", 2);

			QuerySetCell(HtmlAttributes, "Value", "input2",3);
			QuerySetCell(HtmlAttributes, "option", "input3", 3);


<cfloop query="HTMLAttributes">
	<cfselect>
		<cfoutput>
			<option value = "#value#"> #option#
		</cfoutput>
	</cfselect>
</cfloop>

I don't know the answer but my good friend Google does.