如何使這個代碼動態

-1

嗯，我有這個js和html這個可怕的和長的代碼，我怎麼能優化這個？我想把所有這些變成可變的東西，即不必重複所有的代碼如何使這個代碼動態

在html中，你可以看到我如何使用href能夠每月交替，而在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>

來源

2017-09-07 Agustín Osorio

爲什麼不創建一個單一的功能，只是傳遞給它的ID？並使用開關盒 –

如果您的代碼正常工作，而您只是希望改進它，Code Review可能是一個更好的SE站點來問這個問題。 –

如果你可以改變你的表的ID在你的HTML，那麼你可以使代碼工作更容易。您知道您獲得的索引將與表的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">'; 
      }); 
     } 
    }); 
}

來源

2017-09-07 19:00:08 Matt

的函數的結果用開關殼體並提取代碼作爲一個單獨的函數

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/

來源

2017-09-07 18:37:06

它很好，但是這個「cell3.innerHTML = result.data [i] .vencimientos.dic;」是可變的，我如何改變「DIC」 –

這聽起來像你需要一個js模板庫。模板庫允許您將html與數據分開並填寫數據。好的一個也會處理循環，讓你輕鬆渲染數據。我已經與handlebars

從自己的文件了很好的經驗，你可能會呈現一個這樣的數組：

<div id="comments"> 
    {{#each comments}} 
    <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2> 
    <div>{{body}}</div> 
    {{/each}} 
</div>

來源

2017-09-07 18:42:30 frodo2975

如何使這個代碼動態

回答

相關問題