好吧，我有这个可怕的长码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>
答案 0 :(得分：0)
使用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/
答案 1 :(得分：0)
听起来你需要一个js模板库。模板库允许您将html与数据分开并填写数据。一个好的还将处理循环，以便您轻松呈现数据数组。我对handlebars
有很好的体验从他们的文档中，您可以渲染这样的数组：
<div id="comments">
{{#each comments}}
<h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
<div>{{body}}</div>
{{/each}}
</div>
答案 2 :(得分：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">';
});
}
});
}