2017-09-07 1 views
-1

これはひどく長いコードのjsとhtmlを持っていますが、これをどのように最適化できますか? これを何かの変数に変えたいのですが、すべてのコードを繰り返さなくてもいいです。このコードを動的にする方法

htmlでは、js jqueryを使用して毎月交替することができます各セル

function getVencimientos(){ 
 
     $.getJSON("https://maxtechglobal.com/vencimientos/agip/ib.php?cuit="+$("#cuit").val()+"", function(result){ 
 
     for (var i = 0; i < result.data.length; i++) { 
 
      $.each(result.data[i].vencimientos, function(index, value) { 
 
       if(index == "ene") { 
 
       var table_abril = document.getElementById("tabla_impuestos_enero_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.ene; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if(index == "febrero") { 
 
       var table_abril = document.getElementById("tabla_impuestos_febrero_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.feb; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if(index == "mar") { 
 
       var table_abril = document.getElementById("tabla_impuestos_marzo_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.mar; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
       } else if(index == "abr") { 
 
       var table_abril = document.getElementById("tabla_impuestos_abril_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.abr; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "may") { 
 
       var table_abril = document.getElementById("tabla_impuestos_mayo_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.may; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "jun") { 
 
       var table_abril = document.getElementById("tabla_impuestos_junio_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.jun; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "jul") { 
 
       var table_abril = document.getElementById("tabla_impuestos_julio_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.jul; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "ago") { 
 
       var table_abril = document.getElementById("tabla_impuestos_agosto_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.ago; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "sep") { 
 
       var table_abril = document.getElementById("tabla_impuestos_septiembre_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.sep; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "oct") { 
 
       var table_abril = document.getElementById("tabla_impuestos_octubre_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.oct; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "nov") { 
 
       var table_abril = document.getElementById("tabla_impuestos_noviembre_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.nov; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } else if (index == "dic") { 
 
       var table_abril = document.getElementById("tabla_impuestos_diciembre_admin_agip"); 
 
       var row = table_abril.insertRow(-1); 
 

 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       var cell3 = row.insertCell(2); 
 
       var cell4 = row.insertCell(3); 
 
       var cell5 = row.insertCell(4); 
 

 
       cell1.innerHTML = result.data[i].impuesto; 
 
       cell2.innerHTML = result.data[i].concepto; 
 
       cell3.innerHTML = result.data[i].vencimientos.dic; 
 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
 
      } 
 
      }); 
 
     } 
 
     }); 
 
}
<div class="col-md-4"><h5 style="display:none" id="tituloVenc_agip"></h5> 
 
      <div id="Agip_resultados" style="display:none" class="card card-nav-tabs"> 
 
       <div class="header header-info"> 
 
       <div class="nav-tabs-navigation"> 
 
        <div class="nav-tabs-wrapper"> 
 
        <ul class="nav nav-tabs nav-tabs-agip-admin" data-tabs="tabs"> 
 
         <li class="active"><a href="enero_agip_admin" data-toggle="tab" aria-expanded="false">Enero</a></li> 
 
         <li><a href="febrero_agip_admin" data-toggle="tab" aria-expanded="false">Febrero</a></li> 
 
         <li><a href="marzo_agip_admin" data-toggle="tab" aria-expanded="false">Marzo</a></li> 
 
         <li><a href="abril_agip_admin" data-toggle="tab" aria-expanded="false">Abril</a></li> 
 
         <li><a href="mayo_agip_admin" data-toggle="tab" aria-expanded="false">Mayo</a></li> 
 
         <li><a href="junio_agip_admin" data-toggle="tab" aria-expanded="false">Junio</a></li> 
 
         <li><a href="julio_agip_admin" data-toggle="tab" aria-expanded="false">Julio</a></li> 
 
         <li><a href="agosto_agip_admin" data-toggle="tab" aria-expanded="false">Agosto</a></li> 
 
         <li><a href="septiembre_agip_admin" data-toggle="tab" aria-expanded="false">Septiembre</a></li> 
 
         <li><a href="octubre_agip_admin" data-toggle="tab" aria-expanded="false">Octubre</a></li> 
 
         <li><a href="noviembre_agip_admin" data-toggle="tab" aria-expanded="false">Noviembre</a></li> 
 
         <li><a href="diciembre_agip_admin" data-toggle="tab" aria-expanded="false">Diciembre</a></li> 
 
        </ul> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <div class="content"> 
 
       <div class="tab-content tab-content-agip-admin text-center"> 
 
        <div class="tab-pane active" id="enero_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_enero_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="febrero_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_febrero_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="marzo_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_marzo_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="abril_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_abril_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="mayo_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_mayo_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="junio_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_junio_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="julio_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_julio_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="agosto_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_agosto_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="septiembre_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_septiembre_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="octubre_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_octubre_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="noviembre_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_noviembre_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
        <div class="tab-pane" id="diciembre_agip_admin"> 
 
        <table class="table" id="tabla_impuestos_diciembre_admin_agip"> 
 
         <thead> 
 
          <tr> 
 
          <th>Impuesto</th> 
 
          <th>Concepto</th> 
 
          <th>Vencimiento</th> 
 
          <th class="hidden">Agencia</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
    <!--cierra el AGIP --> 
 
     </div> 
 

 
     </div> 
 
    </div>

+0

なぜ単一の関数を作成せず、そのIDを渡すだけですか?スイッチケースを使用してください –

+2

あなたのコードがうまくいれば、それを改善しようとしているだけですが、Code Reviewはおそらくこの質問をするのに良いSEサイトです。 –

答えて

0

あなたのHTMLにあなたのテーブルのIDを変更することができるなら、あなたは、コードを作ることができます多くの作業が簡単です。取得しているインデックスがテーブルのIDと相関するので、テーブルIDをインデックスと同じにするだけです。

function getVencimientos(){ 
    $.getJSON("https://maxtechglobal.com/vencimientos/agip/ib.php?cuit="+$("#cuit").val()+"", function(result){ 
     for (var i = 0; i < result.data.length; i++) { 
      $.each(result.data[i].vencimientos, function(index, value) { 

       var table_abril = document.getElementById("tabla_impuestos_" + index + "_admin_agip"); 
       var row = table_abril.insertRow(-1); 

       var cell1 = row.insertCell(0); 
       var cell2 = row.insertCell(1); 
       var cell3 = row.insertCell(2); 
       var cell4 = row.insertCell(3); 
       var cell5 = row.insertCell(4); 

       cell1.innerHTML = result.data[i].impuesto; 
       cell2.innerHTML = result.data[i].concepto; 
       cell3.innerHTML = result.data[i].vencimientos[index]; 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
      }); 
     } 
    }); 
} 
0

スイッチケースを使用し、別の関数として

function getVencimientos(){ 
     $.getJSON("https://maxtechglobal.com/vencimientos/agip/ib.php?cuit="+$("#cuit").val()+"", function(result){ 
     for (var i = 0; i < result.data.length; i++) { 
      $.each(result.data[i].vencimientos, function(index, value) { 
      switch(index) 
      { 
      case "ene": 
      SetData("tabla_impuestos_enero_admin_agip"); 
      break; 

      case "febrero": 
      SetData("tabla_impuestos_enero_admin_agip"); 
      break; 

      case "mar": 
      SetData("tabla_impuestos_enero_admin_agip"); 
      break; 
      . 
      . 

      } 
あなたのコードを抽出関数の結果

ので、ここでこの

ようになど

とあなたのsetData関数内でIDを渡す

function SetData(id) 
{ 
var table_abril = document.getElementById(id); 
       var row = table_abril.insertRow(-1); 

       var cell1 = row.insertCell(0); 
       var cell2 = row.insertCell(1); 
       var cell3 = row.insertCell(2); 
       var cell4 = row.insertCell(3); 
       var cell5 = row.insertCell(4); 

       cell1.innerHTML = result.data[i].impuesto; 
       cell2.innerHTML = result.data[i].concepto; 
       cell3.innerHTML = result.data[i].vencimientos.dic; 
       cell4.innerHTML = '<label class="hidden">AGIP</label>'; 
       cell5.innerHTML = '<input type="checkbox" name="optionsCheckboxes">'; 
} 

何かがサンプルフィドルは、あなたがいるようですねhttps://jsfiddle.net/fxabnk4o/20/

+0

その良いが、この "cell3.innerHTML = result.data [i] .vencimientos.dic;"変数は、どのように私は "ディック" –

0

ですjsテンプレートライブラリが必要です。テンプレートライブラリを使用すると、htmlとデータを分離してデータを埋め込むことができます。良いものは、データの配列を簡単にレンダリングできるようにループを処理します。私はあなたがこのような配列をレンダリングするかもしれない、そのドキュメントからhandlebars

との良好な経験を持っていた:

<div id="comments"> 
    {{#each comments}} 
    <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2> 
    <div>{{body}}</div> 
    {{/each}} 
</div> 
関連する問題