Planilha para contabilidades em javaScript

Tipo Joia|[]Preço Unidade|[]Quantidade|[]Qt Vendida|[1*2]Preço*Qt|[1*3]Preço*Qt Vendida|[4-5]Valor Estoque
brinco pequeno|1.5|6|4
brinco médio|2|12|5
brinco Grande|4|18|11
anel fino|1.5|6|4
anel médio|2.5|12|5
anel Grande|4|18|11
pulseira pequena|3.5|6|4
pulseira média|5|12|5
pulseira Grande|7|18|11
colar pequeno|4.5|6|4
colar médio|5|12|5
colar Grande|8|18|11

Fonte:

<div id="dados"  style="visibility:hidden;" >Tipo Joia|[]Preço Unidade|[]Quantidade|[]Qt Vendida|[1*2]Preço*Qt|[1*3]Preço*Qt Vendida|[4-5]Valor Estoque<br />
brinco pequeno|1.5|6|4<br />
brinco médio|2|12|5<br />
brinco Grande|4|18|11<br />
anel fino|1.5|6|4<br />
anel médio|2.5|12|5<br />
anel Grande|4|18|11<br />
pulseira pequena|3.5|6|4<br />
pulseira média|5|12|5<br />
pulseira Grande|7|18|11<br />
colar pequeno|4.5|6|4<br />
colar médio|5|12|5<br />
colar Grande|8|18|11<br />
</div>

<div id="modal" style="position:fixed; visibility:hidden; font-family:Arial,Helvetica,sans-serif; top:10px;
left:10px; right:10px;"><table id="fundo" style="position:absolute;  width:100%;
border:1px solid #003366;" ><tr><td id="top_panel" valign="top" colspan="2" height=20
style="position:relative; border:1px solid #003366;"></td>   </tr>
<tr><td   valign="top"  width=320 style="position:relative; border:1px solid #003366;
" ><div id="form_titulo"  style="position:relative; top:0px;  padding:5px; left:0px; right:0px; 
font-size:10pt; font-weight:bold;"  ></div><div id="form_panel"  
style="position:relative; top:0px; bottom:0px;  left:0px; right:0px; 
font-size:10pt; overflow:scroll; width:100%;"></div></td>
<td valign="top" style="position:relative; border:1px solid #003366;" ><div id="table_titulo"
style="position:relative; top:0px;  padding:5px; left:0px; right:0px; 
font-size:10pt; font-weight:bold;"  ></div><div id="table_labels"
style="position:relative; top:0px; left:0px; right:13px; font-size:8pt;
width:100%;" ></div><div id="table_panel"  style="position:absolute; top:55px; bottom:0px; 
left:0px; right:0px;  font-size:8pt; overflow:scroll; width:100%;" ></div></td></tr>
<tr><td   id="buttons_panel" valign="top" colspan="2" height=60 style="position:relative;
border:1px solid #003366;"></td></tr></table></div>
<script>
 //======================================================================================================
 // Inicio
 //======================================================================================================
 dimensoes  = ["20%","10%","10%","15%","15%","15%", "15%"]

//======================================================================================================
 // dados
 //======================================================================================================
 var data;

 //======================================================================================================
 // cores
 //======================================================================================================
 var c0 ="#000000";
 var c1 ="#001133";
 var c2 ="#113355";
 var c3 ="#226699";
 var c4 ="#3399cc";
 var c5 ="#77bbdd";
 var c6 ="#ccddee";
 var c7 ="#FFFFFF";

 //======================================================================================================
 // formularios, tabelas, paineis
 //======================================================================================================
 var fundo  = document.getElementById("fundo");
 var top_panel  = document.getElementById("top_panel");
 var buttons_panel = document.getElementById("buttons_panel");
 var table_panel   = document.getElementById("table_panel");
 var table_titulo  = document.getElementById("table_titulo");
 var table_labels  = document.getElementById("table_labels");
 var form_panel    = document.getElementById("form_panel");
 var form_titulo   = document.getElementById("form_titulo");

 //======================================================================================================
 // acerta cores
 //======================================================================================================
 top_panel.style.backgroundColor  = c5;
 buttons_panel.style.backgroundColor = c5;
 form_titulo.style.backgroundColor = c2;
 table_titulo.style.backgroundColor = c2;
 table_labels.style.backgroundColor = c3;
 table_panel.style.backgroundColor = c4;
 form_panel.style.backgroundColor = c4;
 fundo.style.backgroundColor  = c4;

 //======================================================================================================
 // botoes e regras de modo de visualizaçao e edicao
 //======================================================================================================
 var buttons_metadados = new Array();

 buttons_metadados[0] = new Object();
 buttons_metadados[0].value = "Localizar";
 buttons_metadados[0].action = "Localizar";
 buttons_metadados[0].array_visibilidade = [1,0];

 buttons_metadados[1] = new Object();
 buttons_metadados[1].value = "Limpar";
 buttons_metadados[1].action = "Limpar";
 buttons_metadados[1].array_visibilidade = [1,1];

 buttons_metadados[2] = new Object();
 buttons_metadados[2].value = "Fechar";
 buttons_metadados[2].action = "About_Source";
 buttons_metadados[2].array_visibilidade = [1,1];

 //======================================================================================================
 // troca todas as strings (sequência de caracteres) dadas por uma outra
 //======================================================================================================
 function replaceAll(str, find, replace)
 {
    return str.replace(new RegExp(find, 'g'), replace);
 }

 //======================================================================================================
 // Fecha Botão
 //======================================================================================================
 function buttonClose()
 {
   if(document.getElementById("modal").style.visibility=="visible") 
    document.getElementById("modal").style.visibility = "hidden"
   else
    document.getElementById("modal").style.visibility="visible"
 }

 //======================================================================================================
 // encontra string dentro de outra com regex simples
 //======================================================================================================
 isContentInString = function( find, str )
 {
    return  str.match(find)
 }

 //======================================================================================================
 // converter string em dados
 //======================================================================================================
 stringToArray = function(str)
 {

str = replaceAll(str , "\\n", '\<br\>')
str = replaceAll(str , "\<br\/\>", '\<br\>')
str = replaceAll(str , "\<br\>", '\<br\>')
str = replaceAll(str , "\<br\>\<br\>", '\<br\>')


  var array_resposta = new Array();
  var array1 = str.split("\<br\>");

  //pega o nome dos campos:
  var Array_labels = array1[0].split("|");
  array_resposta.push(Array_labels);

  for(var i=1; i<array1.length-1; i++)
  {
    var array2 = array1[i].split("|");

    for(var j=0; j<Array_labels.length; j++)
    {
        if(Array_labels[j].charAt(0)=='[' && Array_labels[j].charAt(1)!=']')
        {

            var objRegex = /\[((([0-9]*)|([0-9]*\.[0-9]*))([r!%\*\+-^\/]|log)(([0-9]*)|([0-9]*\.[0-9]*))|(([0-9]*)|([0-9]*\.[0-9]*)))\]/ig ;
            var resp = ""+Array_labels[j].match(objRegex)

            resp = resp.substring(1,resp.length-1)

            var objRegex2 = /([r!%\*\+\-^\/]|log)/ig ;
            n = resp.search(objRegex2)



            if(resp.charAt(n)=='%')
            {
                var r = resp.split('%')   
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a%b
            }
            if(resp.charAt(n)=='!')
            {
                var r = resp.split('!')   
                resp = Number(array2[Number(r[0])])
                for(var k=resp-1; k>0; k--)
                resp= resp*k
            }

            else if(resp.charAt(n)=='-')
            {
                var r = resp.split('-')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a-b
            }

            else if(resp.charAt(n)=='+')
            {
                var r = resp.split('+')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a+b
            }
            else if(resp.charAt(n)=='*')
            {
                var r = resp.split('*')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a*b
            }
            else if(resp.charAt(n)=='/')
            {
                var r = resp.split('/')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a/b
            }
            else if(resp.charAt(n)=='^')
            {
                var r = resp.split('^')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= Math.pow(a,b)
            }
            else if(resp.charAt(n)=='r')
            {
                var r = resp.split('r')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= Math.pow(a,1/b)
            }
        }

        else if(Array_labels[j].charAt(0)=='[' )
        {
            resp= Number(array2[j])
        }
        else
        {
            resp =array2[j] ;
        }
           
        array2[j]=resp
       
    }

       array_resposta.push(array2);
  }
  return array_resposta;
 }

 //======================================================================================================
 // converter dados em string
 //======================================================================================================
 dataToString = function(d)
 {
  resp=""
  for(var i=0; i<d.length; i++)
  {
   for(var j=0; j<d[i].length; j++)
   {
    if(j<d[i].length-1)
     resp+=d[i][j]+"|";
    else
     resp+=d[i][j]+"\<br\>";
   }
  }
  return resp;
 }

 //======================================================================================================
 // excluindo colunas
 //======================================================================================================
 dataToString2 = function(d)
 {
  var d_novos = [0, 2, 4, 5, 6, 9, 10, 12, 14, 15]
  var resp=""
  for(var i=0; i<d.length; i++)
  {
   for(var j=0; j<d_novos.length; j++)
   {
    if(j<d_novos.length-1)
     resp+=d[i][d_novos[j]]+"|";
    else
     resp+=d[i][d_novos[j]]+"\<br\>";
   }
  }
  return resp;
 }

 //======================================================================================================
 // executa função pelo nome
 //======================================================================================================
 function executeFunctionByName(functionName, context /*, args */)
 {
  var args = Array.prototype.slice.call(arguments, 2);
 
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++)
  {
   context = context[namespaces[i]];
  }
  return context[func].apply(context, args);
 }

 //======================================================================================================
 // cria botões
 //======================================================================================================
 createButtons = function(metadados, buttons_panel)
 {
  for(var i=0; i<metadados.length; i++)
  {
   var btn = document.createElement("input");
   btn.type = "button"
   btn.style.margin = 3
   buttons_panel.appendChild(btn)
   btn.action = metadados[i].action
   btn.onclick = function(){executeFunctionByName(this.action, window)}
   btn.array_visibilidade = metadados[i].array_visibilidade
   btn.value = metadados[i].value
  }
 }

 //======================================================================================================
 // cria labels
 //======================================================================================================
 createLabels = function(labels, dimensoes)
 {
  var t=document.createElement("table");

  t.style.top                 = "0px";
  t.style.rigth               = "0px";
  t.style.width="100%";

  var row = t.insertRow(0);
  var k=0;
  for(var i=0; i<labels.length; i++)
  {
   k=i;
           var col    = row.insertCell(i);
   col.style.width   = dimensoes[i];

    if(labels[i].charAt(0)=='[')
    label = "&nbsp;"+labels[i].split("]")[1]
    else
    label = "&nbsp;"+labels[i]

   col.innerHTML   = label;

   col.style.border  = "1px solid "+c1;
   col.style.backgroundColor = c5;
   col.style.fontFamily  = "Arial,Helvetica,sans-serif";
   col.style.fontSize  = "8pt";
   col.style.height  = 25;
   col.style.color   = c0;
  }

  col = row.insertCell(k+1); 
  col.innerHTML=" ";
  col.style.width="16px";
  col.style.border="1px solid "+c3;
  col.style.backgroundColor= c4;
  col.style.fontFamily="Arial,Helvetica,sans-serif";
  col.style.fontSize="8pt";
  return t;
 }

 //======================================================================================================
 // cria table
 //======================================================================================================
 createTable = function(titulo, labels, dimensoes)
 {
  table_titulo.innerHTML=titulo;
  table_titulo.style.color=c7 


  document.getElementById("table_labels").appendChild( createLabels(labels, dimensoes)  )

  var tableDados = document.createElement("table");

  tableDados.style.position            ="absolute"; 
  tableDados.style.top                 = "0px";

  tableDados.cellSpacing="0px";
  tableDados.cellPadding="0px";
  tableDados.style.width="100%";
  tableDados.style.fontFamily="Arial,Helvetica,sans-serif";
  tableDados.style.fontSize="8pt";

  table_panel.appendChild( tableDados );

  tableDados.Limpar = function()
  {
   for(var i=0; i<data[0].length; i++)
   {

    if(data[0][i].charAt(0)=='[')
    {
     document.getElementById("input_0_"+i).value="";
     document.getElementById("input_0_"+i+"_A").value="";
     document.getElementById("input_0_"+i+"_B").value="";
    }
    else if(data[0][i].charAt(0)!='[')
    {

    document.getElementById("input_0_"+i).value="";
    document.getElementById("input_0_"+i+"_x").checked=false;
    }

   }
   tableDados.deselecionar();
  }
 
  tableDados.getSelectedRow = function()
  {
   return tableDados.selected_row;
  }

  tableDados.getIntColunName=function(str)
  {
   var j = tableTitulos.getElementsByTagName('tr')[0].getElementsByTagName('td');
   for(var i=0;i<j.length;i++)
   {
    if(j[i]==str)
    return i;
   }
  }
 
  tableDados.removeAll=function() 
  {
   for(var y=0; y<tableDados.getElementsByTagName('tr').length; y++)
   {
    for(var x=0; x<tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td').length;x++)
    {
     tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].innerHTML="&nbsp;";
     tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].style.backgroundColor=c4;
    }
   }
  }

  tableDados.deselecionar=function()
  {
   TRs=this.getElementsByTagName('tr');
   for(var h=0;h<TRs.length;h++)
   {
    TDs=TRs[h].getElementsByTagName('td');
    for(var h2=0; h2<TDs.length; h2++)
    {
     if(TDs[0].innerHTML=="Totais")
     {
      TDs[h2].style.backgroundColor=c6;
     }
     else
     {
      TDs[h2].style.backgroundColor=c7;
     }
    }
   }
  }


tableDados.setData=function(data)
{
    var qt = this.rows.length
    while(qt>0)
    {
        this.deleteRow(qt-1);
        qt = this.rows.length
    }


    //====================================================
    //
    //====================================================
    for(var y=0; y<data.length-1; y++)
    {
        var row=tableDados.insertRow(y);
        for(var i=0; i<data[0].length; i++)
        {
            var col=row.insertCell(i);
            col.innerHTML="&nbsp;";
            col.style.width=dimensoes[i];
            col.style.padding="2px";
            col.style.borderBottom="1px solid "+c2;
            col.style.borderLeft="1px solid "+c2;
            col.style.backgroundColor=c4;
  
            //=========================================================
            // Click Linha
            //=========================================================
            col.onclick=function()
            {
                tableDados.deselecionar();
                tableDados.selected_row = this.line;
                for(var h=0; h<data[0].length; h++)
                {
                    //para todas as colunas mostro o conteúdo nas propriedades
                    //if(data[0][h].charAt(0)=='[')
                    document.getElementById("input_0_"+h).value = this.parentNode.getElementsByTagName('td')[h].innerHTML
                   
                       
                    //para todas as colunas mudo a cor do fundo da linha selecionada
                    this.parentNode.getElementsByTagName('td')[h].style.backgroundColor = c5;
                }
            }
        }
    }

    for(var y=1; y<data.length; y++)
    {
        for(var x=0; x<data[y].length; x++)
        {
            tableDados.getElementsByTagName('tr')[y-1].getElementsByTagName('td')[x].line=y-1
            tableDados.getElementsByTagName('tr')[y-1].getElementsByTagName('td')[x].innerHTML=data[y][x];
            tableDados.getElementsByTagName('tr')[y-1].getElementsByTagName('td')[x].style.backgroundColor=c7;
        }
    }

    //====================================================
    // totais
    //====================================================
    var row=tableDados.insertRow(data.length-1);
    for(var i=0; i<data[0].length; i++)
    {
        var col=row.insertCell(i);
        col.style.width=dimensoes[i];
        col.style.padding="2px";
        col.style.borderBottom="1px solid "+c2;
        col.style.borderLeft="1px solid "+c2;
        col.style.fontWeight="bold";

        if(i==0)
        {
            col.innerHTML="Totais" ;
        }
        else if(data[0][i].charAt(0)=='[')
        {
            resp=0;
            for(var q=1; q<data.length; q++)
            {
                resp+=data[q][i]
            }

            if(resp>0)
                col.style.color="000066";
            else
                col.style.color="cc0000";

            col.innerHTML=resp ;
        }
        else
        {
            col.style.textAlign = "center";
            col.innerHTML="-" ;
        }
    }


    tableDados.deselecionar(); 
}



  //======================================================================================================
  // Localizar
  //======================================================================================================
  tableDados.Localizar = function()
  {
   var str_data = document.getElementById('dados').innerHTML;
   var data = stringToArray(str_data)

   var new_data = new Array();

   //pega nome das colunas
   new_data[0] = data[0]

   //pega conteudo dos dados
   for(var y=1; y<data.length; y++)
   {
    var add = true;

    zero_data = new Array()

    for(var i=0; i<new_data[0].length; i++)
    {
     var v = document.getElementById("input_0_"+i).value
     if( v!="" && new_data[0][i].charAt(0)=='[' )
     {
      if( Number(data[y][i]) == Number(v) )
      {
       zero_data.push(data[y][i])
      }
      else
      {
       add=false;
       i = new_data[0].length
      } 
     }
     else
     {
      if(new_data[0][i].charAt(0)=='[')
      {
       var v1 = document.getElementById("input_0_"+i+"_A").value
       var v2 = document.getElementById("input_0_"+i+"_B").value
 
       if(v1=="" && v2=="")
       {
        zero_data.push(data[y][i])    
       }
       else if(v1!="" && v2=="")
       {
        if( Number(v1) < Number(data[y][i]) )
        {
         zero_data.push(data[y][i])
        }
        else
        {
         add=false;
         i = new_data[0].length
        }
       }
       else if(v1=="" && v2!="")
       {
        if( Number(data[y][i]) < Number(v2) )
        {
         zero_data.push(data[y][i])
        }
        else
        {
         add=false;
         i = new_data[0].length
        }
       }
       else if( v1!="" && v2!="" )
       {
        if( Number(v1) < Number(data[y][i]) && Number(data[y][i]) < Number(v2) )
        {
         zero_data.push(data[y][i])
        }
        else
        {
         add=false;
         i = new_data[0].length
        }
       }
      }
      else
      {
       v1 = document.getElementById("input_0_"+i).value

       if(!document.getElementById("input_0_"+i+"_x").checked)
       {

        v1 = v1.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
        v2 = data[y][i].normalize("NFD").replace(/[\u0300-\u036f]/g, "")
        reg = new RegExp(v1, "i")
         if(isContentInString( reg, v2 )!=null && isContentInString( reg, v2 ))
         {
          zero_data.push(data[y][i])
         }
         else
         {
          add=false;
          i = new_data[0].length
         }
       }
       else
       {
        if( v1!="" && data[y][i].toUpperCase() == v1.toUpperCase() )
        {
         zero_data.push(data[y][i])
        }
        else if(v1=="")
        {
         zero_data.push(data[y][i])
        }
        else
        {
         add=false;
         i = new_data[0].length
        }

       }
      }
     }
    }
    if(add)
    {
     new_data.push(zero_data)
    }
   }
   tableDados.removeAll()
   tableDados.setData(new_data)
  }
  return tableDados;
 }




 //======================================================================================================
 // cria form
 //======================================================================================================
 createForm = function(titulo, labels)
 {
  form_titulo.innerHTML=titulo;
  form_titulo.style.color=c7

  for(var i=0; i<labels.length; i++)
  {
   if(labels[i].charAt(0)=='[')
   {

    var campo =document.createElement("div");
    campo.style.padding=5
    campo.style.background=c6
    campo.style.fontSize="8pt";

    label = labels[i].split("]")[1]
    campo.innerHTML="<span id='label_"+0+"_"+i+"'>"+ label +"</span> = <input type='text' id='input_"+0+"_"+i+"' style='position:absolute; font-Size:8pt; background-color:#FFFFFF; left:90px; width:90px;'></BR>"
    form_panel.appendChild(campo);

    var campo=document.createElement("div");
    campo.style.padding=5
    campo.style.background=c6
    campo.style.fontSize="8pt";
    campo.innerHTML="Ou entre:<input type='text' id='input_"+0+"_"+i+"_A' style='position:absolute; font-Size:8pt; left:90px; width:90px; background-color:#DDDDDD;'> <input type='text' id='input_"+0+"_"+i+"_B' style='position:absolute; font-Size:8pt; left:200px; width:90px; background-color:#DDDDDD;'></BR></BR>"
    form_panel.appendChild(campo);
   }

   else
   {
    var campo=document.createElement("div");
    campo.style.padding=5
    campo.style.background=c6
    campo.style.fontSize="8pt";
    campo.innerHTML="<span id='label_"+0+"_"+i+"'>"+labels[i]+"</span>:<input type='text' id='input_"+0+"_"+i+"' style='position:absolute; font-Size:8pt; left:90px; width:90px;background-color:#FFFFFF;'> <span style='position:absolute; font-Size:8pt; left:200px; '>Busca exata?</span><input type='checkbox' id='input_"+0+"_"+i+"_x' style='position:absolute; font-Size:8pt; left:270px; width:20px;'></BR></BR>"
    form_panel.appendChild(campo);
   }
  }
 }


//======================================================================================================
// eventos de botões
//======================================================================================================
Localizar = function()
{
    table.Localizar()
}

Limpar = function()
{
    table.Limpar()
}

About_Source = function()
{
    document.getElementById("modal").style.visibility = "hidden"
    alert("Produzido por Luiz Augusto Prado\nFaça uma contribuição para mais novidades.\nContato:\ntivideotutoriais.blogspot.com.br")
}


var str_dados = document.getElementById('dados').innerHTML;

data = stringToArray(str_dados)
//ou document.getElementById('dados').innerHTML = dataToString( data )
//alert( dataToString( data ) )
//alert( str_dados)

createButtons(buttons_metadados, buttons_panel)
createForm("Buscar por", data[0])
table = createTable("Lista", data[0], dimensoes)
table.setData(data)

//document.getElementById("dados").value = dataToString2(data)
</script>
<button onclick="buttonClose()">Abrir</button>