add row dynamically in a table which contains textfields,button.

[anirban.anirbanju]

hi there,

i've some serious problem to add rows dynamically in a table.
my table contains 5 cell.

| check | from_value | to_value | color_text | color_value |
---------------------------------------------------------------------------------
| | | | |
|
| | | | |
|
----------------------------------------------------------------------------------


1st cell contains checkbox.
2nd....................a textfield.
3rd.....................a textfield.
4th .....................a textfield and a button(colorpicker
button--by clicking i can select color from popup window and the
hexcode is placed in the textfield of this cell and the corresponding
decimal value is placed to the 5th cell's textfield.)

5th cell contains a textfield.

i've done this.the code is ok for my table when it contains a single
row(my table always contains a single row).
when i add rows by clicking addRow button from this page the rows are
added but i can't get the hexvalue and corresponding decimal value the
4th & 5th cell's textfield for the newly added rows.what's happening,
selecting the color from the popup for newly added rows affect the 1st
row's 4th & 5th cell's textfields.

my script is:
---------------------------------------------------------------------------------------------------------------------

function addRow()
{
alert("called addRow");
var totalRow = document.all.colordef_tab.rows.length;
alert("total row:"+totalRow);

var row = document.all.colordef_tab.insertRow();
var cell_1 = row.insertCell();
var cell_2 = row.insertCell();
var cell_3 = row.insertCell();
var cell_4 = row.insertCell();
var cell_5 = row.insertCell();

cell_1.innerHTML = '<input type="checkbox" name="deleteflag"
id="deleteflag" value="">'+
'<input type="hidden" name="frm_colordefid"
value="">';
cell_2.innerHTML = '<input type="text" align="left"
name="frm_fromvalue" value="">';
cell_3.innerHTML = '<input type="text" align="left"
name="frm_tovalue" value="">';
cell_4.innerHTML = '<input type="text" name="frm_colortext"
id="result_ids" value="" readonly >'+
'<input id="button_id" type=button
onClick="ColorChooser(\'button_id\', \'result_ids\',\'value\')"
value="color">';
cell_5.innerHTML = '<input type="text" align="left"
name="frm_colorvalue" id="dest_id" value="" readonly>';

}

and my jsp is:
-------------------------------------------------------------------------------------------------------

<table width="100%" id="colordef_tab" border="1">

<tr class="list">
<td width="5%" align="left" class="style7"
scope="col">Delete</td>
<td width="20%" align="center" class="style7"
scope="col">From Value </td>
<td width="20%" align="center" class="style7" scope="col">To
Value </td>
<td width="30%" align="center" class="style7"
scope="col">Color Text </td>
<td width="22%" align="center" class="style7"
scope="col">Color Value </td>

</tr>



<%
try
{
if(assaycolors.length>0)
{System.out.println("assaycolors length:"+assaycolors.length);
for(int i=0;i<assaycolors.length;i++)
{


%>
<tr>

<td align="left">
<input type="checkbox" name="deleteflag" id="deleteflag"
value="">
<input type="hidden" name="frm_colordefid"
value="<%=assaycolors.getColorDefId().toString()!=null?assaycolors.getColorDefId().toString():""%>">
</td>


<td><input type="text" name="frm_fromvalue"
value="<%=assaycolors.getFromValue().toString()!=null?assaycolors.getFromValue().toString():""%>"></td>
<td><input type="text" name="frm_tovalue"
value="<%=assaycolors.getToValue().toString()!=null?assaycolors.getToValue().toString():""%>"></td>

<td> <input type="text" name="frm_colortext" id="r_id"
value="<%=assaycolors.getColorText()!=null?assaycolors.getColorText():""%>"
readonly>
<input id="b_id" type="button" value="color"
onClick="ColorChooser('b_id', 'r_id')"></td>



<%-- <td><input type="text" name="frm_colortext"
value="<%=assaycolors.getColorText()!=null?assaycolors.getColorText():""%>"></td>
--%>
<td><input type="text" name="frm_colorvalue" id="dest_id"
value="<%=assaycolors.getColorValue().toString()!=null?assaycolors.getColorValue().toString():""%>"
readonly></td>

</tr>


<%
}
}
else
{
%>
<tr>


</td>
<td align="left">
<input type="checkbox" name="deleteflag" id="t_deleteflag"
value="">
<input type="hidden" name="frm_colordefid" value="">
</td>



<td><input type="text" name="frm_fromvalue" value=""></td>
<td><input type="text" name="frm_tovalue" value=""></td>
<%-- <td><input type="text" name="frm_colortext"
value=""></td> --%>


<td> <input type="text" name="frm_colortext" id="result_id"
value="" readonly>
<input id="button_id" type="button" value="color"
onClick="ColorChooser('button_id', 'result_id', 'value')"> </td>

<td><input type="text" name="frm_colorvalue" id="dest_id"
readonly>
</td>

</tr>
<%
}


%>

 

[Nils Bandener]

Hi!

when i add rows by clicking addRow button from this page the rows are
added but i can't get the hexvalue and corresponding decimal value the
4th & 5th cell's textfield for the newly added rows.what's happening,
selecting the color from the popup for newly added rows affect the 1st
row's 4th & 5th cell's textfields.

You are using constant ids and names for your newly added elements.
Thus, if you add two rows, the input elements of the second row won't
have correct ids, since ids must be unique.

However, the ColorChooser() function probably references the elements
by their id, and thus it cannot correctly reference the elements with
the duplicate ids.

You can use some counter to create unique ids before adding the row to
the document.

Bye

Nils

 

[Gérard Talbot]

hi there,

my script is:
---------------------------------------------------------------------------------------------------------------------

function addRow()
{
alert("called addRow");
var totalRow = document.all.colordef_tab.rows.length;

Your code is IE-specific here.

Accessing Elements with the W3C DOM
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

"You should not use the two proprietary DOMs, Netscape's document.layers
or Microsoft's document.all, any more, though. Safari doesn't support
these DOMs, and neither does Mozilla. Use the Document.getElementById
DOM instead."
Web Page Development: Best Practices
http://developer.apple.com/internet/webcontent/bestwebdev.html

Javascript Best Practices
Don't Use document.all
http://www.javascripttoolbox.com/bestpractices/

alert("total row:"+totalRow);

var row = document.all.colordef_tab.insertRow();
var cell_1 = row.insertCell();
var cell_2 = row.insertCell();
var cell_3 = row.insertCell();
var cell_4 = row.insertCell();
var cell_5 = row.insertCell();

cell_1.innerHTML = '<input type="checkbox" name="deleteflag"
id="deleteflag" value="">'+
'<input type="hidden" name="frm_colordefid"
value="">';

Just like another poster said, if your addRow() function is called more
than once (and it should be called more than once according to you),
then several form controls will have the same id ... which is wrong from
a markup perspective and from a DHTML/javascript perspective.

cell_2.innerHTML = '<input type="text" align="left"
name="frm_fromvalue" value="">';
cell_3.innerHTML = '<input type="text" align="left"
name="frm_tovalue" value="">';
cell_4.innerHTML = '<input type="text" name="frm_colortext"
id="result_ids" value="" readonly >'+
'<input id="button_id" type=button
onClick="ColorChooser(\'button_id\', \'result_ids\',\'value\')"
value="color">';
cell_5.innerHTML = '<input type="text" align="left"
name="frm_colorvalue" id="dest_id" value="" readonly>';

}

and my jsp is:

By specifying width="100%", you are constraining the table. This is
important to understand in particular if later your table has layout issues.

<tr class="list">
<td width="5%" align="left" class="style7"
scope="col">Delete</td>

If that row is a table column header, then you should use <th> instead.
In any case, the default horizontal alignment of <td> (left) and <th>
(center) makes it unneeded to specify the alignment in all modern browsers.

Gérard

 

[Randy Webb]

Gérard Talbot said the following on 3/16/2006 7:50 PM:

Your code is IE-specific here.

It is proprietary but it is not "IE-specific". Opera supports it (in IE
spoof mode) and when not being feature detected some of the Gecko based
browsers support it to a limited extent.

 

[anirban.anirbanju]

Hi Nils Bandener,

u r correct. i've change my script.now there is no prob in addRow()
script.but still have a problem in HexToDec( ) script which is called
from colorchooser function.i've marked the script code where my problem
is.please check my code.......

function addRow()
{
alert("called addRow");

var row = document.all.colordef_tab.insertRow();

var totalRow = document.all.colordef_tab.rows.length;
var index=totalRow-1;
row.id=index;
alert("rowid:"+row.id);
alert("total row:"+totalRow);
var b_id="button_id"+index;
var r_id="result_id"+index;
var dx_id="dest_id"+index;
alert("r_id:"+r_id);

var cell_1 = row.insertCell();
var cell_2 = row.insertCell();
var cell_3 = row.insertCell();
var cell_4 = row.insertCell();
var cell_5 = row.insertCell();

cell_1.innerHTML = '<input type="checkbox" name="deleteflag"
id="deleteflag" value="">'+
'<input type="hidden" name="frm_colordefid"
value="">';
cell_2.innerHTML = '<input type="text" align="left"
name="frm_fromvalue" value="">';
cell_3.innerHTML = '<input type="text" align="left"
name="frm_tovalue" value="">';
var colorVar =
"PcjsColorChooser(\'"+b_id+"\',\'"+r_id+"\',\'"+dx_id+"\',\'"+row.id+"\',value)";
alert(colorVar);
cell_4.innerHTML = '<input type="text" name="frm_colortext"
id="'+r_id +'" value="" readonly >' +
'<input type="button" id="'+b_id+'" onclick=' +
colorVar + ' value="color">';
alert(cell_4.innerHTML);
cell_5.innerHTML = '<input type="text" align="left"
name="frm_colorvalue" id="'+dx_id+'" readonly>';
alert(cell_5.innerHTML);
}

---------------------------------------------------------------------------------------------------------------------------------------------------------
here is my colorchooser function:

// ----- Specific global values
var PcjsDestObject;
var PcjsDestProperty;

// ----- Start color chooser
function PcjsColorChooser(clickobjectid, destobjectid,decdestid,indx,
destproperty)
{

destobject = document.getElementById(destobjectid);
alert("destid is "+destobject);
decdestobject=document.getElementById(decdestid);///testing
alert("decdestid is "+decdestobject);
temp=document.getElementById(destobjectid);
alert("temp:"+temp);
index=document.getElementById(indx);/////////
// index.value=indx;
// index=index.value;

//// alert("index value:"index.value);
//var index=indx;
alert("index:"+index);
// ----- Store the destination object
PcjsDestObject = destobject;
if (destproperty == "")
PcjsDestProperty = "value";
else
PcjsDestProperty = destproperty;

// ----- Get the initial value
eval("PcjsInternalSelectColor(PcjsDestObject."+PcjsDestProperty+")");

// ----- Select the ilayer
var obj = document.getElementById('PcjsColorChooserPopup');

var v_pos =
PcjsccInternalGetAbsolutePosition(document.getElementById(clickobjectid));
var v_height = document.getElementById(clickobjectid).offsetHeight;

// ----- Set the popup position
// obj.style.left = document.body.scrollLeft+event.clientX;
// obj.style.top = document.body.scrollTop+event.clientY;
obj.style.left = v_pos.left;
obj.style.top = v_pos.top+v_height;

// ----- Close the ilayer
obj.style.visibility = "visible";

}

//
-----------------------------------------------------------------------------
// Function : PcjsccInternalGetAbsolutePosition()
// Description :
// Get the absolute position of an object.
// The function calculates the absolute position by adding all the
relative
// offset, from the object to the oldest parent.
//
-----------------------------------------------------------------------------
function PcjsccInternalGetAbsolutePosition(p_object)
{
var v_left;
var v_top;
var v_position = {left:0,top:0};

// ----- Get the object relative position
v_position.left = p_object.offsetLeft;
v_position.top = p_object.offsetTop;

// ----- Get the parent absolute position
if (p_object.offsetParent != null) {
var v_parent_position = {left:0,top:0};

v_parent_position=PcjsccInternalGetAbsolutePosition(p_object.offsetParent);
v_position.left += v_parent_position.left;
v_position.top += v_parent_position.top;
}

return v_position;
}
//
-----------------------------------------------------------------------------

// ----- Close function for color chooser without selection
function PcjsInternalClosePopup()
{
// ----- Select the ilayer
var obj = document.getElementById('PcjsColorChooserPopup');

// ----- Close the ilayer
obj.style.visibility = "hidden";
}

// ----- Close function for color chooser with selection
function PcjsInternalSelectClose()
{
// ----- Select the ilayer
var obj = document.getElementById('PcjsColorChooserPopup');

// ----- Get the value and paste it to destination object
PcjsDestObject.value = document.forms.pcjsform.color.value;

// ----- Look for object type
eval("PcjsDestObject."+PcjsDestProperty+" =
document.forms.pcjsform.color.value");

// ----- Close the ilayer
obj.style.visibility = "hidden";


}

// ----- Internal color selection
function PcjsInternalSelectColor(color)
{
// ----- Paste the color value
//document.forms.pcjsform.color.value = color;
document.getElementById('pcjscolorchooser_color').value = color;

// ----- Change the color viewer
//document.all.pcjscolorchooser_cell.bgColor = color;
document.getElementById('pcjscolorchooser_cell').bgColor = color;
}

// ----- Popup window creator
function PcjsGeneratePopup()
{
// ----- Generate the div tag
document.write("<div id=PcjsColorChooserPopup
style='position:absolute; left:118px; top:214px; width:212px;
height:112px; z-index:1; visibility:hidden; background-color: #FFFFFF;
border: 1px none #000000'> ");
document.write("<table width=100% border=0 cellspacing=0
bgcolor=#0000CC>");
document.write("<tr><td height=13 width=5></td><td height=13> ");
document.write("<div align=right><font face='Verdana, Arial,
Helvetica, sans-serif' color=#FFFFFF size=2><b><a
onClick='PcjsInternalClosePopup()'>x</a></b></font></div>");
document.write("</td><td height=13 width=5> </td></tr>");
document.write("<tr> <td height=71 width=5></td><td height=71
bgcolor=#FFFFFF> ");
document.write("<form id=pcjscolorchooserform name=pcjsform
method=post>");
document.write("<table border=1 cellspacing=0 align=center
bordercolor=#FFFFFF>");
document.write("<tr><td align=center colspan=18><font face='Verdana,
Arial, Helvetica, sans-serif' size=2><b><font color=#0000CC size=3>");
document.write("Color Chooser</font><font color=#0000CC>
</font></b></font><br>");
document.write("</td></tr>");

for (i=0;i<6;i++)
{
document.write("<tr>");
if (i==0) v_color_i="00";
if (i==1) v_color_i="33";
if (i==2) v_color_i="66";
if (i==3) v_color_i="99";
if (i==4) v_color_i="CC";
if (i==5) v_color_i="FF";
for (j=0;j<6;j++)
{
if (j==0) v_color_j="00";
if (j==1) v_color_j="33";
if (j==2) v_color_j="66";
if (j==3) {v_color_j="99"; document.write("<tr>");}
if (j==4) v_color_j="CC";
if (j==5) v_color_j="FF";
for (k=0;k<6;k++)
{
if (k==0) v_color_k="00";
if (k==1) v_color_k="33";
if (k==2) v_color_k="66";
if (k==3) v_color_k="99";
if (k==4) v_color_k="CC";
if (k==5) v_color_k="FF";
document.write("<td bgcolor=#"+v_color_i+v_color_j+v_color_k+"
onClick=PcjsInternalSelectColor('#"+v_color_i+v_color_j+v_color_k+"')
width=10 height=10></td>");
}
if (j==5) {v_color_j="99"; document.write("<tr>");}
}
document.write("</tr>");
}

// ----- Basic color selection
document.write("<tr><td colspan=18></td><td>");
document.write("<tr><td colspan=3></td>");
document.write("<td bgcolor=#000000
onClick=PcjsInternalSelectColor('#000000') width=10 height=10></td>");
document.write("<td bgcolor=#333333
onClick=PcjsInternalSelectColor('#333333') width=10 height=10></td>");
document.write("<td bgcolor=#666666
onClick=PcjsInternalSelectColor('#666666') width=10 height=10></td>");
document.write("<td bgcolor=#999999
onClick=PcjsInternalSelectColor('#999999') width=10 height=10></td>");
document.write("<td bgcolor=#CCCCCC
onClick=PcjsInternalSelectColor('#CCCCCC') width=10 height=10></td>");
document.write("<td bgcolor=#FFFFFF
onClick=PcjsInternalSelectColor('#FFFFFF') width=10 height=10></td>");
document.write("<td bgcolor=#FF0000
onClick=PcjsInternalSelectColor('#FF0000') width=10 height=10></td>");
document.write("<td bgcolor=#00FF00
onClick=PcjsInternalSelectColor('#00FF00') width=10 height=10></td>");
document.write("<td bgcolor=#0000FF
onClick=PcjsInternalSelectColor('#0000FF') width=10 height=10></td>");
document.write("<td bgcolor=#FFFF00
onClick=PcjsInternalSelectColor('#FFFF00') width=10 height=10></td>");
document.write("<td bgcolor=#00FFFF
onClick=PcjsInternalSelectColor('#00FFFF') width=10 height=10></td>");
document.write("<td bgcolor=#FF00FF
onClick=PcjsInternalSelectColor('#FF00FF') width=10 height=10></td>");
document.write("<td colspan=3></td></tr>");

document.write("<tr><td colspan=12 align=center>");
document.write("<font face='Verdana, Arial, Helvetica, sans-serif'
size=2 color=#0000CC>Color : </font>");
document.write("<input type=text id=pcjscolorchooser_color name=color
size=8 maxlength=8></td>");
document.write("<td colspan=6 align=center valign=middle> ");
document.write("<table name=tableau border=0 cellspacing=0
align=center >");
document.write("<tr>");
document.write("<td id=pcjscolorchooser_cell width=20 height=20
align=center valign=middle>&nbsp;</td>");
document.write("</tr>");
document.write("</table>");
document.write("</td></tr>");
document.write("<tr><td colspan=18 align=center>");
document.write("<input type=button name=select value=Select
onClick='PcjsInternalSelectClose();HexToDec(decdestobject,index)'>");
document.write("</td></tr></table>");

///var t="HexToDec(decdestobject,index)";
///alert(t);
document.write("</form></td><td height=71 width=5></td></tr>");
document.write("<tr height=5><td height=5 width=5></td><td
height=5></td><td height=5 width=5></td></tr>");
document.write("</table></div>");
}



// ----- Call the Color Chooser Popup Window generator function
PcjsGeneratePopup();

function HexToDec(decdestobject,index)
{

alert("called HexToDec");
var MyDestObject;
//var decdestobject = document.getElementById(decdestobject);
//var index='+index';
//alert("index:"+index);
//alert("d_id:"decdestobject);
/// MyDestObject = destobject;
//index=index.value;
///var newindex = document.getElementById(indx);

///alert("new index "+newindex);
//newindex.value=indx;
//index=newindex.value;
alert("index:"+index);


MyDestObject = decdestobject;


var result;
var charArray=new Array();


var
hexvalue=document.maintain_form.frm_colortext.value;//////////??(my
problem is here. frm_colortext will be an array,then how to access
this by index.i've passed the index object into hextodec
function.)****************************************************************

alert("hex value:"+hexvalue);
alert("hexvalue length:"+hexvalue.length);
for(var i=0;i<hexvalue.length-1;i++)
{
charArray=hexvalue.charAt(i+1);

if(charArray=='0')
{
charArray=0;
}
else if(charArray=='1')
{
charArray=1;
}
else if(charArray=='2')
{
charArray=2;
}
else if(charArray=='3')
{
charArray=3;
}
else if(charArray=='4')
{
charArray=4;
}
else if(charArray=='5')
{
charArray=5;
}
else if(charArray=='6')
{
charArray=6;
}
else if(charArray=='7')
{
charArray=7;
}
else if(charArray=='8')
{
charArray=8;
}
else if(charArray=='9')
{
charArray=9;
}
else if(charArray=='A')
{
charArray=10;
}
else if(charArray=='B')
{
charArray=11;
}
else if(charArray=='C')
{
charArray=12;
}
else if(charArray=='D')
{
charArray=13;
}
else if(charArray=='E')
{
charArray=14;
}
else if(charArray=='F')
{
charArray=15;
}

}

// result=charArray[0]*Math.pow(16,0);


result=charArray[5]*(Math.pow(16,0))+charArray[4]*(Math.pow(16,1))+charArray[3]*(Math.pow(16,2))+charArray[2]*(Math.pow(16,3))+charArray[1]*(Math.pow(16,4))+charArray[0]*(Math.pow(16,5));
alert("result:"+result);
MyDestObject.value =result;
}

 

[Nils Bandener]

Hi!

u r correct. i've change my script.now there is no prob in addRow()
script.but still have a problem in HexToDec( ) script which is called
from colorchooser function.i've marked the script code where my problem
is.please check my code....... [...]
hexvalue=document.maintain_form.frm_colortext.value;//////////??(my
problem is here. frm_colortext will be an array,then how to access
this by index.i've passed the index object into hextodec
function.)****************************************************************

Uhm, it's quite hard for me to give an exact answer, just because
you've posted quite a lot of code. However, just a quick guess:
frm_colortext is probably an array, because the element name (not the
id!) is still not unique.

You have to possibilities:

1. You could try to add the index also to the element name, just like
you did it for the id. Of course, you have to change all references to
the element and all the places where you create the element.

2. Do not reference the element by name, but by id. This would be
something like

hexvalue = document.getElementById("result_id"+index).value;

Note however, that using this method, some other issues might remain
due to the duplicate names. One candidate for those issues might be
submitting the form, because you'll have to use the element names to
reference the values on the server side.

Bye

Nils

 

[Dr John Stockton]

JRS: In article <[email protected]>
, dated Sat, 18 Mar 2006 00:41:06 remote, seen in
news:comp.lang.javascript, (e-mail address removed) posted :

else if(charArray=='8')
{
charArray=8;
}

The sixteen of those can be replaced by

charArray = parseInt(charArray, 16) // AFAICS.