如何使这个代码动态化

Question

好吧，我有这个可怕的长码js和html，我该如何优化呢？ 我想把所有这些变成一些变量，即不必重复所有代码

在html中你可以看到我如何使用href来每个月交替，而在js中jquery用于在每个单元格中添加函数的结果

＆＃13;

＆＃13;

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">';
            }
          });
        }
      });
}

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用switch case并将代码解压缩为单独的函数

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/

Answer 2

听起来你需要一个js模板库。模板库允许您将html与数据分开并填写数据。一个好的还将处理循环，以便您轻松呈现数据数组。我对handlebars

有很好的体验

从他们的文档中，您可以渲染这样的数组：

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

Answer 3

如果您可以在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">';
            });
        }
    });
}