如何使此代码动态化答案

【问题标题】：how to make this code dynamic如何使此代码动态化
【发布时间】：2017-09-08 03:00:08
【问题描述】：

嗯，我有这么长的 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>

【问题讨论】：

为什么不创建一个函数并将 id 传递给它呢？并使用开关盒
如果您的代码有效，并且您只是想改进它，那么 Code Review 可能是一个更好的 SE 网站来提出这个问题。

标签： javascript jquery html optimization

【解决方案1】：

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

【讨论】：

【解决方案2】：

听起来您需要一个 js 模板库。模板库允许您将 html 从数据中分离出来并填写数据。一个好的还可以处理循环，让您轻松呈现数据数组。我对handlebars 有很好的体验

从他们的文档中，您可能会呈现这样的数组：

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

【讨论】：

【解决方案3】：

使用 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/

【讨论】：

它很好，但是这个“cell3.innerHTML = result.data[i].vencimientos.dic;”是可变的，我怎样才能改变“dic”