Clone node not cloning my select options...
Hi Again,
I have the following that is called from a button in the row to be cloned.
'<input type="BUTTON" value="Split" onClick="javascript:bc_Spl
<script>
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
return false;
}
</script>
The above creates the new row and clones the text items but does not set the select to the cloned values... ???
How do I do this?
I have the following that is called from a button in the row to be cloned.
'<input type="BUTTON" value="Split" onClick="javascript:bc_Spl
<script>
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
return false;
}
</script>
The above creates the new row and clones the text items but does not set the select to the cloned values... ???
How do I do this?
ASKER
R.K.
That is adding files and couldn't see clearly where it clones select lists... ???
Thank you Bill
That is adding files and couldn't see clearly where it clones select lists... ???
Thank you Bill
Here is one. Try it out:
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var parentSelect=theRow.cells[
var newR=theRow.parentNode.row
theTable.rows[newR].cells[
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td>
<select name="selc">
<option>A
<option>B
</select>
</td>
<td><input type="button" value="Split" onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var parentSelect=theRow.cells[
var newR=theRow.parentNode.row
theTable.rows[newR].cells[
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td>
<select name="selc">
<option>A
<option>B
</select>
</td>
<td><input type="button" value="Split" onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
ASKER
Hi Gosp1,
I tried the below and it still didn't clone the selects.
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var parentSelect=theRow.cells[
var newR=theRow.parentNode.row
theTable.rows[newR].cells[
return false;
}
Bill
I tried the below and it still didn't clone the selects.
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var parentSelect=theRow.cells[
var newR=theRow.parentNode.row
theTable.rows[newR].cells[
return false;
}
Bill
Not a problem Bill, I need to see your table structure and find a fix for it.
ASKER
Yes, I see... here is your example with 2 additions:
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var parentSelect=theRow.cells[
var newR=theRow.parentNode.row
theTable.rows[newR].cells[
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td>
<select name="selc1">
<option>A
<option>B
</select>
</td>
<td>
<select name="selc2">
<option>p
<option>m
</select>
</td>
<td>
<select name="selc3">
<option>4
<option>5
</select>
</td>
<td><input type="button" value="Split"
onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var parentSelect=theRow.cells[
var newR=theRow.parentNode.row
theTable.rows[newR].cells[
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td>
<select name="selc1">
<option>A
<option>B
</select>
</td>
<td>
<select name="selc2">
<option>p
<option>m
</select>
</td>
<td>
<select name="selc3">
<option>4
<option>5
</select>
</td>
<td><input type="button" value="Split"
onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
Have a look at this:
<html>
<head>
<title>Script Demo Gops</title>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var newR=theRow.parentNode.row
for(i=0;i<theRow.cells.len
if(theRow.cells[i].childNo
var parentSelect=theRow.cells[
theTable.rows[newR].cells[
}
}
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td>
<select name="selc1">
<option>A
<option>B
</select>
</td>
<td>
<select name="selc2">
<option>p
<option>m
</select>
</td>
<td>
<select name="selc3">
<option>4
<option>5
</select>
</td>
<td><input type="button" value="Split" onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Script Demo Gops</title>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
theRow.parentNode.insertBe
var newR=theRow.parentNode.row
for(i=0;i<theRow.cells.len
if(theRow.cells[i].childNo
var parentSelect=theRow.cells[
theTable.rows[newR].cells[
}
}
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td>
<select name="selc1">
<option>A
<option>B
</select>
</td>
<td>
<select name="selc2">
<option>p
<option>m
</select>
</td>
<td>
<select name="selc3">
<option>4
<option>5
</select>
</td>
<td><input type="button" value="Split" onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Gops1,
I tested the example and it works great!
BUT, I inserted it into my page and it doesn't work.... I played a bit with it put no luck...
<html>
<head>
<title>Script Demo Gops</title>
<body>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
var newR=theRow.parentNode.ins
for(i=0;i<theRow.cells.len
if(theRow.cells[i].childNo
var parentSelect=theRow.cells[
theTable.rows[newR.rowInde
}
}
return false;
}
</script>
<table align="center" cellpadding="0" border="1" bordercolor="black" cellspacing="0" summary=""><tr><td></td></
<tr>
<td><table cellpadding="0" border="0" cellspacing="0" summary="" class="t2standard">
<tr ><th id="CHECK$01" class="t2header"><label for="x01" class="hideMe508">Check All</label><input type="checkbox" name="x02" value="1" onclick="checkAll(this)" /></th><th id="START_DATE" class="t2header">Start Date</th><th id="BEGIN_TIME" class="t2header">Begin Time</th><th id="END_TIME" class="t2header">End Time</th><th id="SESSION_TITLE" class="t2header">Session Title</th><th id="ASSIGNED_RM" class="t2header">Assigned Rm</th><th id=" " class="t2header"> </th></tr>
<tr onmouseover="row_mouse_ove
<!--
function genCalf04_0()
{
elemArrLen = 0;
if (document.forms[0].f04.len
elemArrLen = document.forms[0].f04.leng
}
w = open("wwv_flow_utilities.s
"?p_element_index=" + escape('f04' + '['.substr(0,elemArrLen) +'0'.substr(0,elemArrLen) + ']'.substr(0,elemArrLen)) +
"&p_form_index=" + escape('0') +
"&p_date_format=" + escape('DD-MON-YYYY') +
"&p_application_format=" + escape('Y') +
"&p_bgcolor=" + escape('#666666') +
"&p_dd=" + escape('') +
"&p_hh=" + escape('') +
"&p_mi=" + escape('') +
"&p_pm=" + escape('') +
"&p_yyyy=" + escape('2006') +
"&p_lang=" + escape('en-us') +
"&p_mm=" + escape('11'),
"winLov",
"Scrollbars=no,resizable=n
if (w.opener == null)
w.opener = self;
w.focus();
}
//-->
</script><a href="javascript:genCalf04
<!--
function genCalf04_1()
{
elemArrLen = 0;
if (document.forms[0].f04.len
elemArrLen = document.forms[0].f04.leng
}
w = open("wwv_flow_utilities.s
"?p_element_index=" + escape('f04' + '['.substr(0,elemArrLen) +'1'.substr(0,elemArrLen) + ']'.substr(0,elemArrLen)) +
"&p_form_index=" + escape('0') +
"&p_date_format=" + escape('DD-MON-YYYY') +
"&p_application_format=" + escape('Y') +
"&p_bgcolor=" + escape('#666666') +
"&p_dd=" + escape('') +
"&p_hh=" + escape('') +
"&p_mi=" + escape('') +
"&p_pm=" + escape('') +
"&p_yyyy=" + escape('2006') +
"&p_lang=" + escape('en-us') +
"&p_mm=" + escape('11'),
"winLov",
"Scrollbars=no,resizable=n
if (w.opener == null)
w.opener = self;
w.focus();
}
//-->
</script><a href="javascript:genCalf04
</tr>
<tr><td colspan="10" align="right" ><table summary=""><tr><td class="pagination"></td><t
</table>
</body>
</html>
I tested the example and it works great!
BUT, I inserted it into my page and it doesn't work.... I played a bit with it put no luck...
<html>
<head>
<title>Script Demo Gops</title>
<body>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
var newR=theRow.parentNode.ins
for(i=0;i<theRow.cells.len
if(theRow.cells[i].childNo
var parentSelect=theRow.cells[
theTable.rows[newR.rowInde
}
}
return false;
}
</script>
<table align="center" cellpadding="0" border="1" bordercolor="black" cellspacing="0" summary=""><tr><td></td></
<tr>
<td><table cellpadding="0" border="0" cellspacing="0" summary="" class="t2standard">
<tr ><th id="CHECK$01" class="t2header"><label for="x01" class="hideMe508">Check All</label><input type="checkbox" name="x02" value="1" onclick="checkAll(this)" /></th><th id="START_DATE" class="t2header">Start Date</th><th id="BEGIN_TIME" class="t2header">Begin Time</th><th id="END_TIME" class="t2header">End Time</th><th id="SESSION_TITLE" class="t2header">Session Title</th><th id="ASSIGNED_RM" class="t2header">Assigned Rm</th><th id=" " class="t2header"> </th></tr>
<tr onmouseover="row_mouse_ove
<!--
function genCalf04_0()
{
elemArrLen = 0;
if (document.forms[0].f04.len
elemArrLen = document.forms[0].f04.leng
}
w = open("wwv_flow_utilities.s
"?p_element_index=" + escape('f04' + '['.substr(0,elemArrLen) +'0'.substr(0,elemArrLen) + ']'.substr(0,elemArrLen)) +
"&p_form_index=" + escape('0') +
"&p_date_format=" + escape('DD-MON-YYYY') +
"&p_application_format=" + escape('Y') +
"&p_bgcolor=" + escape('#666666') +
"&p_dd=" + escape('') +
"&p_hh=" + escape('') +
"&p_mi=" + escape('') +
"&p_pm=" + escape('') +
"&p_yyyy=" + escape('2006') +
"&p_lang=" + escape('en-us') +
"&p_mm=" + escape('11'),
"winLov",
"Scrollbars=no,resizable=n
if (w.opener == null)
w.opener = self;
w.focus();
}
//-->
</script><a href="javascript:genCalf04
<!--
function genCalf04_1()
{
elemArrLen = 0;
if (document.forms[0].f04.len
elemArrLen = document.forms[0].f04.leng
}
w = open("wwv_flow_utilities.s
"?p_element_index=" + escape('f04' + '['.substr(0,elemArrLen) +'1'.substr(0,elemArrLen) + ']'.substr(0,elemArrLen)) +
"&p_form_index=" + escape('0') +
"&p_date_format=" + escape('DD-MON-YYYY') +
"&p_application_format=" + escape('Y') +
"&p_bgcolor=" + escape('#666666') +
"&p_dd=" + escape('') +
"&p_hh=" + escape('') +
"&p_mi=" + escape('') +
"&p_pm=" + escape('') +
"&p_yyyy=" + escape('2006') +
"&p_lang=" + escape('en-us') +
"&p_mm=" + escape('11'),
"winLov",
"Scrollbars=no,resizable=n
if (w.opener == null)
w.opener = self;
w.focus();
}
//-->
</script><a href="javascript:genCalf04
</tr>
<tr><td colspan="10" align="right" ><table summary=""><tr><td class="pagination"></td><t
</table>
</body>
</html>
ASKER
Gops1,
I just realized! Your example doesn't use the VALUE
<select name="selc1">
<option>A
<option>B
</select>
<select name="selc1">
<option value="26" >LaSalle/Medina</option>
<option value="27" >Medina</option>
<option value="28" >Maverick</option>
<option value="29" >Maverick/Real</option>
<option value="30" >Real</option
</select>
I just realized! Your example doesn't use the VALUE
<select name="selc1">
<option>A
<option>B
</select>
<select name="selc1">
<option value="26" >LaSalle/Medina</option>
<option value="27" >Medina</option>
<option value="28" >Maverick</option>
<option value="29" >Maverick/Real</option>
<option value="30" >Real</option
</select>
ASKER
I reduced the example of my page down to 3 selects ... and it is not working...
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
var newR=theRow.parentNode.ins
for(i=0;i<theRow.cells.len
if(theRow.cells[i].childNo
var parentSelect=theRow.cells[
theTable.rows[newR.rowInde
}
}
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td headers="ASSIGNED_RM1" class="t2data">
<label for="f07_0001" class="hideMe508">ASSIGNED
<select name="f07" id="f07_0001">
<option value="">- Select -</option>
<option value="1" >Atascosa</option>
<option value="2" >Atascosa/Bandera</option>
<option value="3" >Atascosa/Bandera/Bexar</o
<option value="4" >Atascosa/Bandera/Bexar/Di
<option value="5" >Atascosa/Bandera/Bexar/Di
<option value="6" >Atascosa/Bandera/Bexar/Di
<option value="7" >Bandera</option>
<option value="8" >Bandera/Bexar</option>
<option value="9" selected="selected">Bander
<option value="10" >Bandera/Bexar/Dimmit/Frio
<option value="11" >Bandera/Bexar/Dimmit/Frio
<option value="12" >Bexar</option>
<option value="13" >Bexar/Dimmit</option>
<option value="14" >Bexar/Dimmit/Frio</option
<option value="15" >Bexar/Dimmit/Frio/Kendal<
<option value="16" >Dimmit</option>
<option value="17" >Frio</option>
<option value="18" >Frio/Bexar</option>
<option value="19" >Frio/Bexar/Kendal</option
<option value="20" >Frio/Kendall</option>
<option value="21" >Kendall</option>
<option value="22" >Kinney</option>
<option value="23" >Kinney/Kerr</option>
<option value="24" >Kerr</option>
<option value="25" >LaSalle</option>
<option value="26" >LaSalle/Medina</option>
<option value="56" >Redbud</option>
</select>
</td>
<td headers="ASSIGNED_RM2" class="t2data">
<label for="f07_0002" class="hideMe508">ASSIGNED
<select name="f07" id="f07_0002">
<option value="">- Select -</option>
<option value="1" >Atascosa</option>
<option value="2" >Atascosa/Bandera</option>
<option value="3" >Atascosa/Bandera/Bexar</o
<option value="4" >Atascosa/Bandera/Bexar/Di
<option value="5" >Atascosa/Bandera/Bexar/Di
<option value="6" >Atascosa/Bandera/Bexar/Di
<option value="7" >Bandera</option>
<option value="8" >Bandera/Bexar</option>
<option value="9" selected="selected">Bander
<option value="10" >Bandera/Bexar/Dimmit/Frio
<option value="11" >Bandera/Bexar/Dimmit/Frio
<option value="12" >Bexar</option>
<option value="13" >Bexar/Dimmit</option>
<option value="14" >Bexar/Dimmit/Frio</option
<option value="15" >Bexar/Dimmit/Frio/Kendal<
<option value="16" >Dimmit</option>
<option value="17" >Frio</option>
<option value="18" >Frio/Bexar</option>
<option value="19" >Frio/Bexar/Kendal</option
<option value="20" >Frio/Kendall</option>
<option value="21" >Kendall</option>
<option value="22" >Kinney</option>
<option value="23" >Kinney/Kerr</option>
<option value="24" >Kerr</option>
<option value="25" >LaSalle</option>
<option value="26" >LaSalle/Medina</option>
<option value="56" >Redbud</option>
</select>
</td>
<td headers="ASSIGNED_RM3" class="t2data">
<label for="f07_0003" class="hideMe508">ASSIGNED
<select name="f07" id="f07_0003">
<option value="">- Select -</option>
<option value="1" >Atascosa</option>
<option value="2" >Atascosa/Bandera</option>
<option value="3" >Atascosa/Bandera/Bexar</o
<option value="4" >Atascosa/Bandera/Bexar/Di
<option value="5" >Atascosa/Bandera/Bexar/Di
<option value="6" >Atascosa/Bandera/Bexar/Di
<option value="7" >Bandera</option>
<option value="8" >Bandera/Bexar</option>
<option value="9" selected="selected">Bander
<option value="10" >Bandera/Bexar/Dimmit/Frio
<option value="11" >Bandera/Bexar/Dimmit/Frio
<option value="12" >Bexar</option>
<option value="13" >Bexar/Dimmit</option>
<option value="14" >Bexar/Dimmit/Frio</option
<option value="15" >Bexar/Dimmit/Frio/Kendal<
<option value="16" >Dimmit</option>
<option value="17" >Frio</option>
<option value="18" >Frio/Bexar</option>
<option value="19" >Frio/Bexar/Kendal</option
<option value="20" >Frio/Kendall</option>
<option value="21" >Kendall</option>
<option value="22" >Kinney</option>
<option value="23" >Kinney/Kerr</option>
<option value="24" >Kerr</option>
<option value="25" >LaSalle</option>
<option value="26" >LaSalle/Medina</option>
<option value="56" >Redbud</option>
</select>
</td>
<td><input type="button" value="Split" onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
ASKER
This works fine... but not the above???
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
function bc_SplitTableRow(theLink){
theRow = theLink.parentNode.parentN
theTable=theRow.parentNode
newRow = theRow.cloneNode(true);
var newR=theRow.parentNode.ins
for(i=0;i<theRow.cells.len
if(theRow.cells[i].childNo
var parentSelect=theRow.cells[
theTable.rows[newR.rowInde
}
}
return false;
}
</script>
</head>
<body>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" size="10" name="txt"></td>
<td>
<select name="selc1">
<option value="26" >LaSalle/Medina</option>
<option value="27" >Medina</option>
<option value="28" >Maverick</option>
<option value="29" >Maverick/Real</option>
<option value="30" >Real</option>
</select>
</td>
<td>
<select name="selc2">
<option value="26" >LaSalle/Medina</option>
<option value="27" >Medina</option>
<option value="28" >Maverick</option>
<option value="29" >Maverick/Real</option>
<option value="30" >Real</option>
</select>
</td>
<td>
<select name="selc3">
<option value="26" >LaSalle/Medina</option>
<option value="27" >Medina</option>
<option value="28" >Maverick</option>
<option value="29" >Maverick/Real</option>
<option value="30" >Real</option>
</select>
</td>
<td><input type="button" value="Split" onClick="javascript:bc_Spl
</tr>
</table>
</body>
</html>
ASKER
Gops1,
I took the <label for="f07_0003" class="hideMe508">ASSIGNED
off each select and it works fine..
I am using Oracle Application Express and don't know where that comes from.... any ideas?
Thank you, Bill
I took the <label for="f07_0003" class="hideMe508">ASSIGNED
off each select and it works fine..
I am using Oracle Application Express and don't know where that comes from.... any ideas?
Thank you, Bill
ASKER
Gops1,
On Mozilla it works fine...
I have Oracle looking into it...
Thanks for all your help! Bill
On Mozilla it works fine...
I have Oracle looking into it...
Thanks for all your help! Bill
look at here...
https://www.experts-exchange.com/questions/21285346/Dynamic-elements-addition-problem.html
R.K