<!doctype html><html>
<head>
<title>List - RJM Programming - March, 2017</title>
<style>
span { font-size: 40px; background-color: lightblue; }
</style>
<script type='text/javascript'>
var wasstr0="";
var str0="";
var str1="";
var nextrow=1;
var maxrow=1;
var en=[48,49,50,51,52,53,54,55,56,57];
var changed=false;
var extracols=["","","","","",""];
var extracolsplus=["","","","","",""];
function process(oi) {
var coi='', icoi, jcoi, rec, emailurl='mailto:', eqdelim=encodeURIComponent('='), edelim=encodeURIComponent('?');
if (eval(oi.id.replace(/i/g,'')) == maxrow) {
if (!changed && maxrow == 1) {
var tds=document.getElementsByTagName('td');
for (var itds=0; itds<tds.length; itds++) {
tds[itds].colSpan=1;
}
document.getElementById('tr0').innerHTML=wasstr0;
str1=str1.replace(/colspan='3'/g,"colspan='1'").replace(/colspan="3"/g,'colspan="1"').replace(/colspan=3/g,"colspan=1");
}
if (maxrow == 1) {
for (var jcol=1; jcol<=6; jcol++) {
if (document.getElementById('h' + jcol)) {
document.getElementById('ih' + jcol).innerHTML='';
}
}
}
maxrow++;
nextrow=maxrow;
coi='' + maxrow;
//<tr id='tr1'><td colspan=3><span>1⃣</span></td><td colspan=3><input id='qw1' name='qw1' value=''></input></td><td colspan=3><input style='width:90%;' onblur='process(this);' id='i1' name='i1' value=''></input></td></tr>
//rec="<tr id='tr" + maxrow + "'><td><span>";
rec=str1.replace(/colspan='1'/g,"colspan='one'").replace(/colspan="1"/g,'colspan="one"').replace(/colspan=1/g,"colspan=one").replace(/1/g,maxrow).replace(/colspan='one'/g,"colspan='1'").replace(/colspan="one"/g,'colspan="1"').replace(/colspan=one/g,"colspan=1").split('<span>')[0] + '<span>';
for (icoi=0; icoi<coi.length; icoi++) {
rec+='&#';
rec+=('' + en[eval(coi.substring(icoi,eval(1 + icoi)))]);
rec+=';&#';
rec+='8419';
rec+=";";
}
//rec+="</span></td><td><input id='qw" + maxrow + "' name='qw" + maxrow + "' value=''></input></td><td><input style='width:90%;' onblur='process(this);' id='i" + maxrow + "' name='i" + maxrow + "' value=''></input></td></tr>" + String.fromCharCode(10); // + "<tr id='tr" + eval(1 + maxrow) + "' style='display:table-row;'></tr>";
rec+="</span>" + str1.replace('tr1','tr' + maxrow).split('</span>')[1].replace(/colspan='1'/g,"colspan='one'").replace(/colspan="1"/g,'colspan="one"').replace(/colspan=1/g,"colspan=one").replace(/1/g,maxrow).replace(/colspan='one'/g,"colspan='1'").replace(/colspan="one"/g,'colspan="1"').replace(/colspan=one/g,"colspan=1");
document.getElementById('tr' + maxrow).style.display='table-row';
document.getElementById('tr' + maxrow).innerHTML=rec.replace("<tr id='tr" + maxrow + "'>","").replace("</tr>","");
document.getElementById('qw' + maxrow).focus();
}
emailurl+=document.getElementById('i0').value;
emailurl+='?subject=' + encodeURIComponent(document.getElementById('i0i').value);
emailurl+='&body=' + encodeURIComponent(document.URL.split('#')[0].split('?')[0]);
emailurl+=edelim + 'emailee' + eqdelim + encodeURIComponent(document.getElementById('i0').value);
edelim=encodeURIComponent('&');
emailurl+=edelim + 'subject' + eqdelim + encodeURIComponent(encodeURIComponent(document.getElementById('i0i').value));
for (icoi=1; icoi<maxrow; icoi++) {
emailurl+=edelim + 'qw' + icoi + eqdelim + encodeURIComponent(encodeURIComponent(document.getElementById('qw' + icoi).value));
edelim=encodeURIComponent('&');
emailurl+=edelim + 'i' + icoi + eqdelim + encodeURIComponent(encodeURIComponent(document.getElementById('i' + icoi).value));
for (jcoi=1; jcoi<=extracols.length; jcoi++) {
if (extracols[eval(-1 + jcoi)] != "") {
//emailurl+=edelim + extracols[eval(-1 + jcoi)].toLowerCase().replace(/\ /g,'_') + '__' + jcoi + '___' + icoi + eqdelim + encodeURIComponent(document.getElementById(extracols[eval(-1 + jcoi)].toLowerCase().replace(/\ /g,'_') + icoi).value);
emailurl+=edelim + extracols[eval(-1 + jcoi)].replace(/\ /g,'_') + '__' + jcoi + '___' + icoi + eqdelim + encodeURIComponent(encodeURIComponent(document.getElementById(extracols[eval(-1 + jcoi)].toLowerCase().replace(/\ /g,'_') + icoi).value));
}
}
}
document.getElementById('myemail').href=emailurl;
}
function addcol(iois) {
if (maxrow == 1) {
if (iois.value.replace('+','') != '') {
changed=true;
extracols[eval(-1 + eval(iois.id.replace('h','')))]=iois.value;
document.getElementById('i' + iois.id).innerHTML = iois.value;
// name of ... <tr id="tr1"><td colspan="3"><span>1⃣</span></td><td colspan="3"><input id="qw1" name="qw1" value=""></td><td colspan="3"><input style="width:90%;" onblur="process(this);" id="i1" name="i1" value=""></td></tr>
if (iois.id.replace('h','') == '1') {
str1=str1.replace(' colspan="2"><span',' colspan="1"><span').replace(' colspan="3"><span',' colspan="2"><span').replace('<td','<td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td><td');
document.getElementById('tr1').innerHTML=str1;
//alert(iois.value.toLowerCase() + ' ... ' + str1);
} else if (iois.id.replace('h','') == '2') {
str1=str1.replace(' colspan="2"><span',' colspan="1"><span').replace(' colspan="3"><span',' colspan="2"><span').replace('</span></td>','</span></td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td>');
document.getElementById('tr1').innerHTML=str1;
//alert(iois.value.toLowerCase() + ' ... ' + str1);
} else if (iois.id.replace('h','') == '3') {
str1=str1.replace('</td><td colspan="2"><input id="qw1"','</td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td><td colspan="1"><input id="qw1"').replace('</td><td colspan="3"><input id="qw1"','</td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td><td colspan="2"><input id="qw1"');
document.getElementById('tr1').innerHTML=str1;
//alert(iois.value.toLowerCase() + ' ... ' + str1);
} else if (iois.id.replace('h','') == '4') {
str1=str1.replace('<td colspan="2"><input id="qw1" name="qw1" value=""></td>','<td colspan="1"><input id="qw1" name="qw1" value=""></td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td>').replace('<td colspan="3"><input id="qw1" name="qw1" value=""></td>','<td colspan="2"><input id="qw1" name="qw1" value=""></td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td>');
document.getElementById('tr1').innerHTML=str1;
//alert(iois.value.toLowerCase() + ' ... ' + str1);
} else if (iois.id.replace('h','') == '5') {
str1=str1.replace('</td><td colspan="2"><input style="width:90%;" onblur="process(this);" id="i1"','</td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td><td colspan="1"><input style="width:90%;" onblur="process(this);" id="i1"').replace('</td><td colspan="3"><input style="width:90%;" onblur="process(this);" id="i1"','</td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td><td colspan="2"><input style="width:90%;" onblur="process(this);" id="i1"');
document.getElementById('tr1').innerHTML=str1;
//alert(iois.value.toLowerCase() + ' ... ' + str1);
} else if (iois.id.replace('h','') == '6') {
str1=str1.replace('<td colspan="2"><input style="width:90%;" onblur="process(this);" id="i1" name="i1" value=""></td>','<td colspan="1"><input style="width:90%;" onblur="process(this);" id="i1" name="i1" value=""></td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td>').replace('<td colspan="3"><input style="width:90%;" onblur="process(this);" id="i1" name="i1" value=""></td>','<td colspan="2"><input style="width:90%;" onblur="process(this);" id="i1" name="i1" value=""></td><td><input type=text name=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 id=' + extracols[eval(-1 + eval(iois.id.replace('h','')))].toLowerCase().replace(/\ /g,'_') + '1 value=""></input></td>');
document.getElementById('tr1').innerHTML=str1;
//alert(iois.value.toLowerCase() + ' ... ' + str1);
}
}
}
}
function doothers(ubitis) {
var oare=ubitis.split('___1='), ooare;
if (oare.length > 1) {
for (var ioare=0; ioare<eval(-1 + oare.length); ioare++) {
ooare=oare[ioare].split('__');
document.getElementById('h' + ooare[1]).value=ooare[0].split('&')[eval(-1 + ooare[0].split('&').length)].replace(/_/g,' ');
extracols[eval(-1 + eval(ooare[1]))]=document.getElementById('h' + ooare[1]).value;
extracolsplus[eval(-1 + eval(ooare[1]))]=document.getElementById('h' + ooare[1]).value + '__' + ooare[1];
addcol(document.getElementById('h' + ooare[1]));
}
}
}
function addlotsofrows() {
var nextqw='', nexti='', realtr="", jcoi;
str1=document.getElementById('tr1').innerHTML;
//alert(str1);
document.getElementById('tr1').innerHTML=str1.replace(/colspan='1'/g,"colspan='3'").replace(/colspan="1"/g,'colspan="3"').replace(/colspan=1/g,"colspan=3");
str1=document.getElementById('tr1').outerHTML;
wasstr0=document.getElementById('tr0').innerHTML;
document.getElementById('tr0').innerHTML="<th id=ih1><input title='Name of a new column' onclick=\"this.value='';\" onblur='addcol(this);' id=h1 type=text value='+'></input></th><th>#</th><th id=ih2><input title='Name of a new column' onclick=\"this.value='';\" onblur='addcol(this);' id=h2 type=text value='+'></input></th><th id=ih3><input title='Name of a new column' onclick=\"this.value='';\" onblur='addcol(this);' id=h3 type=text value='+'></input></th><th>Quantity or Weight</th><th id=ih4><input title='Name of a new column' onclick=\"this.value='';\" onblur='addcol(this);' id=h4 type=text value='+'></input></th><th id=ih5><input title='Name of a new column' onclick=\"this.value='';\" onblur='addcol(this);' id=h5 type=text value='+'></input></th><th>Item</th><th id=ih6><input title='Name of a new column' onclick=\"this.value='';\" onblur='addcol(this);' id=h6 type=text value='+'></input></th>";
str0=document.getElementById('tr0').outerHTML;
document.getElementById('i0').value=location.search.split('emailee=')[1] ? decodeURIComponent(location.search.split('emailee=')[1].split('&')[0]) : 'fill.in@email.to';
document.getElementById('i0i').value=location.search.split('subject=')[1] ? decodeURIComponent(location.search.split('subject=')[1].split('&')[0]) : 'My List';
for (var iii=2; iii<350; iii++) {
document.getElementById('mytbody').innerHTML+="<tr id='tr" + iii + "' style='display:none;'></tr>";
}
doothers(document.URL.split('#')[0]);
document.getElementById('qw1').value=location.search.split('qw1=')[1] ? decodeURIComponent(location.search.split('qw1=')[1].split('&')[0]) : '';
document.getElementById('i1').value=location.search.split('i1=')[1] ? decodeURIComponent(location.search.split('i1=')[1].split('&')[0]) : '';
for (jcoi=1; jcoi<=extracols.length; jcoi++) {
if (extracols[eval(-1 + jcoi)] != "") {
//alert(extracols[eval(-1 + jcoi)].toLowerCase().replace(/\ /g,'_') + '1');
document.getElementById(extracols[eval(-1 + jcoi)].toLowerCase().replace(/\ /g,'_') + '1').value=location.search.split(extracolsplus[eval(-1 + jcoi)].replace(/\ /g,'_') + '___1=')[1] ? decodeURIComponent(location.search.split(extracolsplus[eval(-1 + jcoi)].replace(/\ /g,'_') + '___1=')[1].split('&')[0]) : '';
}
}
document.getElementById('qw1').focus();
if (document.getElementById('i1').value != "" || document.getElementById('qw1').value != "") {
process(document.getElementById('i1'));
realtr=document.getElementById('tr0').outerHTML + document.getElementById('tr1').outerHTML;
} else {
process(document.getElementById('i0'));
}
for (var ii=2; ii<350; ii++) {
nextqw=location.search.split('qw' + ii + '=')[1] ? decodeURIComponent(location.search.split('qw' + ii + '=')[1].split('&')[0]) : '';
nexti=location.search.split('i' + ii + '=')[1] ? decodeURIComponent(location.search.split('i' + ii + '=')[1].split('&')[0]) : '';
if (realtr != "") {
if (nexti != '' || nextqw != '') {
document.getElementById('qw' + ii).value=nextqw;
document.getElementById('i' + ii).value=nexti;
for (jcoi=1; jcoi<=extracols.length; jcoi++) {
if (extracols[eval(-1 + jcoi)] != "") {
//alert(extracols[eval(-1 + jcoi)].toLowerCase().replace(/\ /g,'_') + ii);
document.getElementById(extracols[eval(-1 + jcoi)].toLowerCase().replace(/\ /g,'_') + ii).value=location.search.split(extracolsplus[eval(-1 + jcoi)].replace(/\ /g,'_') + '___' + ii + '=')[1] ? decodeURIComponent(location.search.split(extracolsplus[eval(-1 + jcoi)].replace(/\ /g,'_') + '___' + ii + '=')[1].split('&')[0]) : '';
}
}
process(document.getElementById('i' + ii));
realtr+=document.getElementById('tr' + ii).outerHTML;
} else {
realtr+="<tr id='tr" + ii + "' style='display:none;'></tr>";
}
} //else {
// document.getElementById('mytbody').innerHTML+="<tr id='tr" + ii + "' style='display:none;'></tr>";
//}
}
//if (realtr != "") document.getElementById('mytbody').innerHTML=realtr;
}
</script>
</head>
<body style='background-color:yellow;' onload='addlotsofrows();'>
<h1 style='width:100%;text-align:center;'>My List</h1>
<h3 style='width:100%;text-align:center;'>RJM Programming - March, 2017</h3><br>
<form style='width:100%;text-align:center;' onsubmit="document.getElementById('myemail').click(); return false;" action='#' method='GET'>
Title for List: <input onblur='process(this);' type='text' name='subject' id='i0i' value='My List'></input><br><br>
<table id='mytable' border=20 style='background-color:orange;width:100%;text-align:center;'><tbody id='mytbody'>
<tr id='tr0'><th>#</th><th>Quantity or Weight</th><th>Item</th></tr>
<tr id='tr1'><td colspan=1><span>1⃣</span></td><td colspan=1><input id='qw1' name='qw1' value=''></input></td><td colspan=1><input style='width:90%;' onblur='process(this);' id='i1' name='i1' value=''></input></td></tr>
</tbody></table>
<br><br>
<input style='font-size:40px;width:10%;background-color:pink;height:60px;' type='submit' name='email' value='Email to '></input> <input type='text' name='emailee' onblur='process(this);' id='i0' value='fill.in@email.to'></input>
</form>
<a style='display:none;' id='myemail' href='mailto:fill.in@email.to?subject=My%20List&body='>Email</a>
</body>
</html>