Please help!
I'm trying to clone and delete multiple rows with JavaScript.
I need two delete buttons that work...!
I only have one for now, but it's not working properly, the output count is messing up.
Problems:
# 1 - The most important feature is a delete feature for multiple cloned rows.
I need the delete feature for both Colors table and Letters table
When you click on Add More Letters twice, then Click on Add More Colors twice, then click on Delete This Letter, the alert reads ''Letter count is NAN"
Turning the integer into a string.
It does not subtract 1 from the Letter Count.
You will need both of the pages in one directory to see the output.
The second code need to be saved as see_results.htm l
Please help!
Thanks in advance,
Nigel
I'm trying to clone and delete multiple rows with JavaScript.
I need two delete buttons that work...!
I only have one for now, but it's not working properly, the output count is messing up.
Problems:
# 1 - The most important feature is a delete feature for multiple cloned rows.
I need the delete feature for both Colors table and Letters table
When you click on Add More Letters twice, then Click on Add More Colors twice, then click on Delete This Letter, the alert reads ''Letter count is NAN"
Turning the integer into a string.
It does not subtract 1 from the Letter Count.
You will need both of the pages in one directory to see the output.
The second code need to be saved as see_results.htm l
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Colors and Letters</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
/**************************
// clone the Item rows
**************************/
function clone_rows(myType) {
//If its the first time, then clone the rows
if( ! clone_rows.app){
clone_rows.app = { firstRun: true };
app = clone_rows.app;
app.counterer = 0;
}
app = clone_rows.app;
app.counterer++;
var clone_table = el( (myType === "items" ? "clone_table" :
"clone_table") || "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;
};
}
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.counterer + "_" + oldName;
}
if (newInput.tabIndex) {
app.tab = app.tab+20;
newInput.tabIndex = app.tab;
}
});
return a;
}
// Set the counter item (passes how many cloned rows there are)
var hiddenItemCount = el("counterer") || document.createElement("input");
hiddenItemCount.setAttribute("type", "hidden");
hiddenItemCount.id = "counterer";
hiddenItemCount.setAttribute("name", "theItemCount");
hiddenItemCount.setAttribute("value",app.counterer);
el("clone_table").appendChild(hiddenItemCount);
alert("The Color Count is " + app.counterer);
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 clone row function
/**************************
// clone the file rows
**************************/
function clone_rows_files(myType) {
//If its the first time, then clone the rows
if( ! clone_rows_files.app) {
clone_rows_files.app = { firstRun: true };
app = clone_rows_files.app;
app.countFile = 0;
app.tab = 500;
}
app = clone_rows_files.app;
app.countFile++;
var clone_table_files = el("clone_table_files")
var rows = tags( clone_table_files,"tr");
if( ! app.clones) {
app.clones=[];
var startIndex = 0;
var rowCount = rows.length;
function getClones(a,b) {
if(a.className === "cloneFile") {
var t = a.cloneNode(true);
t.className = "";
app.clones[app.clones.length] =t;
startIndex = b;
return t;
};
}
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 = "file" + app.countFile + "_" + oldName;
}
if (newInput.tabIndex) {
app.tab = app.tab+20;
newInput.tabIndex = app.tab;
}
});
return a;
}
// Set the counter item (passes how many cloned rows there are)
// Set the counter item (passes how many cloned rows there are)
var hiddenFileCount = el("file_counter") || document.createElement("input");
hiddenFileCount.setAttribute("type", "hidden");
hiddenFileCount.id = "file_counter";
hiddenFileCount.setAttribute("name", "theFileCount");
hiddenFileCount.setAttribute("value",app.countFile);
el("clone_table_files").appendChild(hiddenFileCount);
alert("The Letter count is " + app.countFile);
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 clone row file funciton
/**************************
// Delete Row File
**************************/
function deleteRow(r)
{
var o=r.parentNode.parentNode.parentNode.rowIndex;
document.getElementById('clone_table_files').deleteRow(o);
app.countFile = app.countFile-"1";
var hiddenFileCount = el("file_counter") || document.createElement("input");
hiddenFileCount.setAttribute("type", "hidden");
hiddenFileCount.id = "file_counter";
hiddenFileCount.setAttribute("name", "theFileCount");
hiddenFileCount.setAttribute("value",app.countFile);
el("clone_table_files").appendChild(hiddenFileCount);
alert("The Letter count is " + app.countFile);
}//end of delete row file funciton
/**************************
// Style the file rows
**************************/
function stylizeFile()
{
var rows = tags( "clone_table_files" ,"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);
}
/**************************
// Style the Item rows
**************************/
function stylizeItem(){
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;
};
}
// this function is needed to work around a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode("class") != null) {
result = obj.getAttributeNode("class").value;
}
return result;
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="stylizeItem();stylizeFile();stylizeItem();">
<form action="see_results.html" method="get" name="theForm" id="test">
<table>
<tr valign="top" align="right" class="red">
<td colspan="2">HI</td>
</tr>
<tr valign="top">
<td>
Color1</td>
<td><input type=text name="Color1" class="required" size="50" maxlength="250" value=""></td>
</tr>
<tr valign="top">
<td>Color2</td>
<td><input type=text name="Color2" size="50" maxlength="250" value=""></td>
</tr>
<tr bgcolor="#C3D6E8" valign="top">
<td>Color3</b></td>
<td>
<select id="Color3" name="Color3">
<option value="">--None--</option>
<option value="F5-San Jose"
>Color1</option>
<option value="F5-Seattle"
>Color2</option>
<option value="F5-Spokane"
>Color3</option>
</select><br>
Color4 <input type=text name="Color4" size="50" maxlength="250" value="">
</td>
</tr>
<tr valign="top">
<td>Color5</b></td>
<td><input type=text name="Color5" size="50" maxlength="250" value="" class="required"></td>
</tr>
<tr bgcolor="#C3D6E8" valign="top">
<td>Color6</td>
<td><input type=text name="Color6" size="50" maxlength="250" value=""></td>
</tr>
<tr valign="top">
<td>Color7</td>
<td><input type=text name="Color7" size="50" maxlength="250" value=""></td>
</tr>
<tr valign="top">
<td>Color8</b></td>
<td><input type="text" class="required" size="10" id="theProductBy" name="Color8" value="" />
</td>
</tr>
<tr valign="top">
<td>Color9</td>
<td><input type=text name="Color9" size="50" maxlength="250" value=""></td>
</tr>
</table>
<br />
<!-- Letters SECTION -->
<table id="clone_table">
<tr valign="top" class="red">
<td colspan="2">Color10</td>
</tr>
<tr valign="top" class="clone">
<td>Color11</td>
<td><input type=text name="Color11" size="5" maxlength="350"></td>
</tr>
<tr valign="top" class="clone">
<td>Color12</td>
<td><input type=text name="Color12" size="5" maxlength="350" value=""></td>
</tr>
<tr valign="top" class="clone">
<td>Color13</td>
<td><input type=text name="Color13" size="5" maxlength="350" value="" ></td>
</tr>
<tr valign="top" class="clone">
<td>Color14</td>
<td><input type=text name="Color14" size="40" maxlength="250" value="" class="required"></td>
</tr>
<tr valign="top" class="clone">
<td>Color15</td>
<td>
<select name="Color15">
<option value="">--None--</option>
<option value="a"
>a</option>
<option value="b"
>b</option>
<option value="c"
>c/option>
<option value="d"
>d</option>
</select>
</td>
</tr>
<tr valign="top" class="clone">
<td>Color16</td>
<td>
<select name="Color16">
<option value="">--None--</option>
<option value="red"
>red</option>
<option value="black"
>black</option>
<option value="orange"
>orange</option>
</select>
</td>
</tr>
<tr class="clone"> <td><br /> </td> <td> <br /> </td> </tr>
<tr>
<td colspan="2">
<input type="button" value="Add More Colors" onclick="clone_rows('items'); return false;" /></td>
</tr>
</table>
<br />
<input type="hidden" name="hideLetter" value="123" />
<table width="100%" border="0" cellpadding="3" cellspacing="1" id="clone_table_files">
<tr valign="top" class="red">
<td colspan="3"><strong>File Attachments Section (total 5 MB max)</strong></td>
</tr>
<tr valign="top" class="cloneFile">
<td>Letter1</td>
<td>
<input name="Letter1" type="text" />
<div align="right"><input type="button" value="Delete This Letter" onclick="deleteRow(this)" /></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Add More Letters" onclick="clone_rows_files('files');hidediv('imgToHide'); return false;" /></td>
</tr>
</table>
<table>
<tr valign="top">
<td><input name="submit_form" type="submit" value="Submit"></td>
<td align="right"></td>
</tr>
</table>
</form>
</td>
<td></td>
</tr>
</table>
<br><br><br><br>
</body>
</html>
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Output</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function printToPage()
{
var pos;
var searchStr = window.location.search;
var searchArray = searchStr.substring(1,searchStr.length).split('&');
var htmlOutput = '';
for (var i=0; i<searchArray.length; i++) {
htmlOutput += searchArray[i] + '<br />';
}
return(htmlOutput);
}
</script>
</head>
<body>
Below should be the name/value pairs that were submitted:
<p>
<script language="JavaScript">
<!--
document.write(printToPage());
//-->
</script>
</p>
</body>
</html>
Thanks in advance,
Nigel
Comment