the line. First, my code to clone the second and third tr from the table,
then add the clone line the end of list.
But how can I write another "append" so I can add line in between the line?
i try insertBefore, but not works. Please help. thanks.
My html code
Expand|Select|Wrap|Line Numbers
- <table border=0 cellpadding=5 cellspacing=0 id="quotetable">
- <tr class='stdtext' align='center'>
- <td>Start Date</td>
- <td>End Date</td>
- <td colspan=2 class="blackstdtext" style="font-size: 7pt" colspan=3>[<a href="javascript:void(0)" onClick="AddQuoteLine()">add line</a>]</td>
- </tr>
- <tr>
- <td><input name='form_startdate[]' value='' size=10 class=stdbox></td>
- <td><input name='form_enddate[]' value='' size=10 class=stdbox></td>
- <td><img src='../images/trash.gif' border=0 onClick='RemoveLine(this)'></td>
- <td style='font-size: 7pt'>[<a href='javascript:void(0)' onClick='ShowSiteDetails(this)'>
- <td colspan=2 class="blackstdtext" style="font-size: 7pt" colspan=3>[<a href="javascript:void(0)" onClick="AppendQuoteLine()">Apend line</a>]</td>
- override site </a>]</td>
- </tr>
- <tr class='hidetext'>
- <td colspan='10'>
- <table border=0 align='left' cellpadding='1' cellspacing='1' class='stdtable'>
- <tr><td bgcolor="#c7e2f9">
- <table border=0 width=100% bgcolor="#c7e2f9">
- <tr class='tinytext' align='center'>
- <td>Contact Name</td>
- <td>Address 1</td>
- </tr>
- <tr>
- <td><input name='form_sitecontactname[]' value='' size='15' class='stdbox'></td>
- <td><input name='form_siteaddress1[]' value='' size='10' class='stdbox'></td>
- </tr>
- </table>
- </td></tr>
- </table>
- </td>
- </tr>
- </table>
.js file code
Expand|Select|Wrap|Line Numbers
- function AddQuoteLine(sourceobj) {
- var parenttableobj = document.getElementById("quotetable");
- var tablebodies = parenttableobj.getElementsByTagName("tbody");
- //alert(tablebodies);
- var tableobj = tablebodies[0];
- //alert(tableobj);
- if (tableobj) {
- var tablerows = tableobj.getElementsByTagName("tr");
- if (tablerows) {
- if (sourceobj) {
- // Clone the selected row but dont erase values
- var newobj = sourceobj.cloneNode(true);
- //var newobj1 = sourceobj.nextSibling.cloneNode(true);
- newobj.style.backgroundColor = "";
- } else {
- // Clone the first row
- var newobj = tablerows[1].cloneNode(true);
- var newobj1 = tablerows[2].cloneNode(true);
- newobj.style.backgroundColor = "";
- newobj1.style.backgroundColor = "";
- // Now erase the existing values
- inputfields = newobj.getElementsByTagName("input");
- for (var x = 0; x < inputfields.length; x++) {
- inputfields[x].value = "";
- }
- inputfields1 = newobj1.getElementsByTagName("input");
- for (var x = 0; x < inputfields1.length; x++) {
- inputfields1[x].value = "";
- }
- selectfields = newobj1.getElementsByTagName("select");
- for (var x = 0; x < selectfields.length; x++) {
- selectfields[x].value = "";
- }
- }
- tableobj.appendChild(newobj);
- tableobj.appendChild(newobj1);
- }
- }
- }