During coding JavaScript applications, we usually have to work with many JavaScript arrays; and sometimes declare/initiate them is the time-consuming tasks.
For this reason, I would like to present...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
#display {
position: relative;
left: 10px;
width: 450px;
border: 1px solid black;
padding: 10px;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
// Created by: Mr. J | http://www.huntingground.net/
// This script downloaded from www.JavaScriptBank.com
function init(){
array_name=document.f1.t1.value //name of array
val2=document.f1.t3a.value
ext=document.f1.t4.value
for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
if(document.f1.r1[r].checked==true){
option=document.f1.r1[r].value // selected radio value
}
}
if(option==0){
document.getElementById("display").innerHTML=array_name+" = new Array(" // opening array type 1
} else {
document.getElementById("display").innerHTML=array_name+" = new Array()<br>" // opening array type 2 & 3
}
if(document.f1.r2[0].checked==true){ // if indexed values
make_array1()
}
if(document.f1.r2[1].checked==true){ // if non index values
make_array2()
}
}
function make_array1(){
array_length=document.f1.t2.value-1 // length of array
index_values=document.f1.t3.value // index value
if(array_length==""||array_length==0){ // make sure a viable number is used
document.getElementById("display").innerHTML="Please Enter a Number"
document.f1.b2.disabled=true
return
} else {
if(!ns){document.f1.cpy.disabled=false}
}
for(num=0;num<array_length;num++){
j=num
if(num<10){num="00"+num}
if(num>9&&num<100){num="0"+num}
if(document.f1.t4.value.length>0){
i=num+val2+ext}
else{i=num+val2}
if(option==0){ // insert inner indexes for type 1
document.getElementById("display").innerHTML+="\""+index_values+i+"\", "
} else {
if(option==1){ // insert inner indexes for type 2
document.getElementById("display").innerHTML+=array_name+"["+j+"]="
document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br>"
} else { // insert inner indexes for type 3
document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br>"
}
}
}
if(num<10){num="00"+num}
if(num>9&&num<100){num="0"+num}
if(num>100){num=num}
if(document.f1.t4.value.length>0){
i= num+val2+ext}
else{i=num+val2}
if(option==0){ // insert last indexes for type 1
document.getElementById("display").innerHTML+="\""+index_values+i+"\")"
} else {
if(option==1){ // insert last indexes for type 2
document.getElementById("display").innerHTML+=array_name+"["+(j+1)+"]="
document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br>"
} else { // insert last indexes for type 3
document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br>"
}
}
}
index_value=new Array()
count= 0
last=0
function make_array2(){
if(!ns){document.f1.cpy.disabled=false}
for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
if(document.f1.r1[r].checked==true){
chkrad=r
}
}
if(chkrad!=last){ // prevent additional index when only changing array style
count--
}
if(document.f1.t4.value.length>0){
index_value[count]=document.f1.t3.value+ext}
else {
index_value[count]=document.f1.t3.value
}
for(i=0;i<count;i++){
if(option==0){
document.getElementById("display").innerHTML+="\""+index_value[i]+"\", "
} else {
if(option==2){
document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br>"
} else {
document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br>"
}
}
}
if(option==0){
document.getElementById("display").innerHTML+="\""+index_value[i]+"\")"
} else {
if(option==2){
document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br>"
} else {
document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br>"
}
}
count++
document.f1.t3.select()
last=chkrad
}
function oreset(){
count=0
document.f1.t3.value=""
document.getElementById("display").innerHTML=""
document.f1.t3.select()
}
function chk(){
if(document.f1.r2[0].checked==true){
document.f1.t2.disabled=false
document.getElementById("sp").disabled=false
document.f1.t2.style.backgroundColor="#FFFFFF"
document.f1.b1.disabled=false
document.f1.b2.disabled=true
document.f1.b3.disabled=true
document.f1.t3a.disabled=false
document.f1.t3a.style.backgroundColor="#FFFFFF"
} else {
document.f1.t2.disabled=true
document.getElementById("sp").disabled=true
document.f1.t2.style.backgroundColor="#c0c0c0"
document.f1.b1.disabled=true
document.f1.b2.disabled=false
document.f1.b3.disabled=false
document.f1.t3.select()
document.f1.t3a.disabled=true
document.f1.t3a.style.backgroundColor="#c0c0c0"
}
}
function Copy(id){
if(ns){
alert("Sorry, Netscape does not recongise this function")
document.f1.cpy.disabled=true
return
}
copyit=id
textRange = document.body.createTextRange();
textRange.moveToElementText(copyit);
textRange.execCommand("Copy");
alert("Copying Complete.\n\nPlease Paste into your SCRIPT")
}
ns=document.getElementById&&!document.all
function getKey(e) {
pressed_key=(!ns)?event.keyCode:e.which
if( pressed_key==13){
init()
}
}
document.onkeypress = getKey;
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<!--
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<form name="f1">
<table border="0">
<tr>
<td>Array Name:</td>
<td colspan="6">
<input type="text" name="t1" value="myArray">
</td>
</tr><tr>
<td>
<span id="sp">Indexed Array Length:</span>
</td>
<td colspan="6">
<input type="text" name="t2" value="5" size="3" maxlength="3">
</td>
</tr><tr>
<td>Index Value:</td>
<td colspan="6">
<input type="text" name="t3" value="image" size="10">
<input type="text" name="t3a" value="_tn" size="10"> Ext
<input type="text" name="t4" value=".jpg" size="4" maxlength="4">
</td>
</tr><tr>
<td>Index Style:</td>
<td align="right">1
<input type="radio" name="r1" value="0" checked onclick="init()">
</td>
<td> </td>
<td align="right">2
<input type="radio" name="r1" value="1" onclick="init()">
</td>
<td> </td>
<td align="right">3
<input type="radio" name="r1" value="2" onclick="init()">
</td>
<td width="80"> </td>
</tr><tr>
<td>Add Numerical Values:</td>
<td align="right">Yes
<input type="radio" name="r2" value="0" checked onclick="chk()">
</td>
<td align="center"> </td>
<td align="right">No
<input type="radio" name="r2" value="1" onclick="chk()">
</td>
<td> </td>
<td colspan="2"> </td>
</tr><tr align="center">
<td>
<input type="button" name="b1" value="Numerical Enter" onclick="init()">
</td>
<td colspan="6">
<input type="button" name="cpy" value="Copy Array" onclick="Copy(display)" disabled>
<input type="button" name="b2" value="Manual Enter" onclick="init()" disabled>
<input type="button" name="b3" value="Restart" onclick="oreset()" disabled>
</td>
</tr>
</table>
</form>
<div id="display"></div>