Dynamically Insert Row

fs22 · July 8th, 2005, 04:51 PM

Does anyone know how I can use the onChange event to dynamically add a row to a table that is a duplicate of the row I just changed?

  <tr>
    <td><cfselect name="prod1select" id="prod1select" onChange="javascript:addrow();">
        <option value="NULL" selected>Please select a product.</option>
      <cfoutput query="rsProducts">
        <option value="#ProductName#">#ProductName#</option>
      </cfoutput>
      </cfselect></td>
    <td><cfinput name="qty" type="text" id="qty" value="1" size="5" maxlength="2"></td>
  </tr>

I need to add a second row just like the above one after the onChange event...thoughts, anyone?

Clay Hess

joefawcett · July 9th, 2005, 04:47 AM

Well it would leave an invalid document because you'd have two elements with the same id, "prod1select". They'd also have the same name so you could have problems when reading submitted data.

That aside the code, in IE, would be something like:

Code:

onChange="addrow(this.parentElement.parentElement);

function addRow(Row)
{
  var oParent = Row.parentElement;
  var oNewRow = Row.cloneNode();
  oParent.appendChild(oNewRow);
}

Although you can change the id of the select after creation you can't change the name so you may want to build your own method of copying the select and then replacing the cloned one with that.

--

Joe (Microsoft MVP - XML)