Hi,
Here's a little bug that's killing me
So, depending if you click on the first "Add More Items" button or second "Add More Items" button. It will only duplicate that particular table on top of the button you pressed. If you click on the first "Add More Items" button then click on the second "Add More Items" button, the outcome is not consistent.
I would like it so that if you click on the first "Add More Items" button it will only copy and paste the 7 row table on top of it.
If you click on the second "Add More Items" button it will only copy and paste the two row column table on top of that button.
You will notice that I added an "alert" feature to show you what is happening.
Please help!
Here's a little bug that's killing me
Code:
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function clone_rows(myType) {
if( ! clone_rows.app){
clone_rows.app = { firstRun: true };
app = clone_rows.app;
app.count = 0;
app.tab = 500;
}
app = clone_rows.app;
app.count++;
var clone_table = el( (myType === "items" ? "clone_table" :
"clone_table_files") || "clone_table" )
var rows = tags( clone_table,"tr");
if( ! app.clones){ app.clones=[];
var startIndex = 0;
var rowCount = rows.length;
function getClones(a,b){
if(a.className === "clone"){ var t = a.cloneNode(true); t.className = ""; app.clones[app.clones.length] =t; startIndex = b; return t; };
alert(startIndex);
}
rows.map(getClones);
}
function dupeNode(a){return a.cloneNode(true);}
function updateInputs(a,bb){
var r = tags(a, "input") || [];
r = r.concat( tags(a, "select") );
if(!r || !r[0]){return;}
r.map(function(a,b,c){
if(!a){return;}
var newInput = a;
var oldName = newInput.name.split("_");
if (oldName[1]) {
oldName = oldName[1];
newInput.name = "item" + app.count + "_" + oldName;
}
if (newInput.tabIndex) {
app.tab = app.tab+20;
newInput.tabIndex = app.tab;
}
});
return a;
}
var hiddenCount = el("counter") || document.createElement("input");
hiddenCount.setAttribute("type", "hidden");
hiddenCount.id = "counter";
if (myType == "items") {
hiddenCount.setAttribute("name", "theItemCount");
}
if (myType == "files") {
hiddenCount.setAttribute("name", "theFileCount");
}
hiddenCount.setAttribute("value",app.count);
el("clone_table").appendChild(hiddenCount);
var clones = app.clones.map(dupeNode); //new instance
app.clones2= clones;
var spot = rows[ rows.length -1 ];
var mom = spot.parentNode;
clones.map(function(a,b){ mom.insertBefore(a, spot );})
clones.map(updateInputs);
for(var i =0, mx= clones.length; i<mx;i++){
var tt= tags(clones[i], "input");
if(tt && tt[0]){ var it = tt[0];
if(it.scrollIntoView){it.scrollIntoView(true); } ; return
setTimeout(function(){ it.focus(); }, 200);}
}
}//end of clonerow funciton
function stylize(){
var rows = tags( "clone_table" ,"tr");
function colorize(a,i){
if (i % 2) {
var bgcolor = "#C3D6E8";
} else {
var bgcolor = "#CCCCCC";
}
tags(a, "td")[0].style.textAlign = "right";
a.style.backgroundColor= a.getAttribute("bgcolor") ?
a.bgcolor : bgcolor ;
}
rows.map(colorize);
}
function el(tid) {return document.getElementById(tid);} function obValsl(ob) {try {if (ob && ob.length) {var r = [], i = 0, mx = ob.length;for (var z = 0; z < mx; z++) {r[z] = ob[z] || undefined;}}} catch (yy) {alert(yy);}return r;}; function tags(elm, tid) {var t = "getElementsByTagName";if (tid) {if
(elm.charCodeAt) {elm = el(elm);}return obValsl(elm[t](tid));}return obValsl(document[t](elm));} if (!Array.prototype.map) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
Array.prototype.map = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var res = new Array(len);var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {res[i] = fun.call(thisp, this[i], i, this);}}return res;};}
</script>
<table>
<tr>
<td></td>
<td>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="0" background="/images/assets/header_bg.jpg">
<tr>
<td class="pgTitle">hi</td>
<td align="right"></td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td ><br>
<form action="" method="post" name="theForm" >
<table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1">
<tr bgcolor="#CCCCCC" valign="top" align="right" class="red">
<td colspan="2"></td>
</tr>
<tr bgcolor="#C3D6E8" valign="top">
<td>Name </td>
<td><input type=text name="theSupplier" size="50" maxlength="250" value=""></td>
</tr>
<tr bgcolor="#CCCCCC" valign="top">
<td>address</td>
<td><input type=text name="theSupplierContact" size="50" maxlength="250" value=""></td>
</tr>
<tr bgcolor="#C3D6E8" valign="top">
<td>date</td>
<td>
<select id="theShip" name="theShip">
<option value="">--None--</option>
<option value="stuff1"
>stuff1</option>
<option value="stuff2"
>stuff2</option>
<option value="stuff3"
>stuff3</option>
<option value="stuff4"
>stuff4</option>
</select><br>
Why <input type=text name="theOther" size="50" maxlength="250" value="">
</td>
</tr>
<tr bgcolor="#CCCCCC" valign="top">
<td>desc </td>
<td><input type=text name="thePODesc" size="50" maxlength="250" value=""></td>
</tr>
<tr bgcolor="#C3D6E8" valign="top">
<td>toy</td>
<td><input type=text name="theNoteSupplier" size="50" maxlength="250" value=""></td>
</tr>
<tr bgcolor="#CCCCCC" valign="top">
<td>give</td>
<td><input type=text name="theNoteApprovers" size="50" maxlength="250" value=""></td>
</tr>
<tr bgcolor="#C3D6E8" valign="top">
<td>bye</td>
<td><input type="text" size="10" id="theProductBy" name="theProductBy" value="" onfocus="event.cancelBubble = true; showCalendar('theProductBy');" onclick="event.cancelBubble = true; showCalendar('theProductBy');" />
<img src="/images/assets/calendar.gif" onclick="event.cancelBubble = true; showCalendar('theProductBy');" alt="Click here to set the date" title="Click here to set the date" />
</td>
</tr>
<tr bgcolor="#CCCCCC" valign="top">
<td>home</td>
<td><input type=text name="theNote" size="50" maxlength="250" value=""></td>
</tr>
<tr bgcolor="#C3D6E8" valign="top">
<td></td>
<td></tr>
</table>
<br />
<!-- ITEMS SECTION -->
<table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1" id="clone_table">
<tr bgcolor="" valign="top" class="red">
<td colspan="3"><strong>roof</strong></td>
</tr>
<tr bgcolor="" valign="top" class="clone">
<td>Quantity </td>
<td><input type=text name="item0_theQuantity" size="5" maxlength="350" onfocus="this.select();" tabindex="101"></td>
</tr>
<tr bgcolor="" valign="top" class="clone">
<td>say</td>
<td><input type=text name="item0_theItem" size="5" maxlength="350" value="" onfocus="this.select();" tabindex="102"></td>
</tr>
<tr bgcolor="" valign="top" class="clone">
<td>boat </td>
<td><input type=text name="item0_thePrice" size="5" maxlength="350" value="" onfocus="this.select();" tabindex="104"></td>
</tr>
<tr bgcolor="" valign="top" class="clone">
<td>car</td>
<td colspan="2"><input type=text name="item0_theDescription" size="40" maxlength="250" value="" onfocus="this.select();" tabindex="106" ></td>
</tr>
<tr bgcolor="#010101" style="line-height: 20%;" class="clone"> <td> <br /> </td> <td> <br /> </td> </tr>
<tr>
<td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('items'); return false;" tabindex="5110" /></td>
</tr>
</table>
<br />
<input type="hidden" name="hippi" value="2000000" />
<table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1" id="clone_table_files">
<tr bgcolor="" valign="top" class="red">
<td colspan="3">hi</td>
</tr>
<tr bgcolor="" valign="top" class="clone">
<td></td>
<td>
<input name="hi" type="text" />
</td>
</tr>
<tr bgcolor="#010101" style="line-height: 20%;" class="clone"> <td> <br /> </td> <td> <br /> </td> </tr>
<tr>
<td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('files'); return false;" tabindex="5110" /></td>
</tr>
</table>
<table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1">
<tr valign="top">
<td><input name="submit_form" type="submit" value="Submit"></td>
<td align="right"></td>
</tr>
</table>
</form>
</td>
<td><img src="/images/assets/clear.gif" width="20" height="10" border="0"></td>
</tr>
</table>
<br><br><br><br>
</body>
</html>
So, depending if you click on the first "Add More Items" button or second "Add More Items" button. It will only duplicate that particular table on top of the button you pressed. If you click on the first "Add More Items" button then click on the second "Add More Items" button, the outcome is not consistent.
I would like it so that if you click on the first "Add More Items" button it will only copy and paste the 7 row table on top of it.
If you click on the second "Add More Items" button it will only copy and paste the two row column table on top of that button.
You will notice that I added an "alert" feature to show you what is happening.
Please help!
Comment