美好的一天,我有一个代码可以根据我选择的月份生成一个表格,该向量可以是任意数字,然后当我点击保存按钮时,使用 javascript 函数生成一个表格,即我保存数组中的月份并生成包含数组对象的表。但是我希望他们有一个按钮,单击该按钮时会删除该行并删除数组,所以我想知道是否有一个功能,当我单击该行时,它会给我能够删除的数字它来自数组。
我希望你明白我想告诉你的,谢谢。
在这里,我放了我拥有的代码。
const mes_especial = [];
const vector_mensual = [];
function guardar_mes_especial() {
var inputmes = document.getElementById('mesEspecial');
var ms = inputmes.options[inputmes.selectedIndex].text;
var vs = document.getElementById('vectorMensual').value;
if (ms != 'Elige un mes' && vs != 1) {
mes_especial.push(ms);
vector_mensual.push(vs);
}
document.querySelector('#mesespecial').innerHTML = generarTablaMesesEspeciales(mes_especial, vector_mensual);
document.ready = document.getElementById('mesEspecial').value = '13';
document.ready = document.getElementById('vectorMensual').value = '1';
}
function generarTablaMesesEspeciales(mes_especial, vector_mensual) {
var tabla1 =
"<table id='tablita1' class='table'> <thead class='thead-light'> <tr><th scope='col'>Mes</th><th scope='col'>Vector mensual</th></tr></thead>";
tabla1 += '<tbody>';
for (var i = 0; i < mes_especial.length; i++) {
tabla1 += '<tr><td>' + mes_especial[i] + '</td><td>' + vector_mensual[i] + '</td></tr>';
}
tabla1 += '</tbody>';
tabla1 += '</table>';
return tabla1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fechas</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header>
<h1 class="display-1 text-center bg-light text-dark">Cuotas</h1>
</header>
<main>
<div class="container">
<div class="row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="mesEspecial">Meses especiales</label>
<select name="mesEspecial" id="mesEspecial" class="form-control">
<option value="13">Elige un mes</option>
<option value='0'>Enero</option>
<option value='1'>Febrero</option>
<option value='2'>Marzo</option>
<option value='3'>Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="vectorMensual">Vector del mes</label>
<input class="form-control" type="number" name="vectorMensual" id="vectorMensual" placeholder="Introduce el vector" value="1" min="0" max="10" step="0.25" required>
</div>
<div class="form-group col-md-4" >
<label for="guardar"> </label>
<br>
<button name="guardar" class="btn btn-light" id="guardar" onclick="guardar_mes_especial()">Guardar</button>
</div>
</div>
<div class="form-group text-center">
<div id="mesespecial"></div>
</div>
</div>
</div>
</main>
</body>
</html>
在这里,我给你一个用 jQuery 制作的可能的解决方案:
onclick="remove(this)"
将在函数内部按下的元素作为参数传递,remove()
我们获取父元素的索引,el.closest("tr").index()
并依次删除数组中的值,这要归功于splice
我们告诉它删除位于该位置的值的函数索引并删除 1 个单个元素,它看起来像这样:array.splice(indice, 1)
工作示例:
我希望这可以帮助你
Javascript
根据您的要求,我给您留下一个功能:我所做的是创建一个新的,其中
td
包含一个button
,说button
我添加了事件onclick
。该函数onclick
负责删除row
当前的,获取índice
del并使用 functionrow
将其从 中删除。arrays
splice
参考资料: https ://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from
我希望它对你有帮助。问候。