Tengo la siguiente página, que es un administrador de tarea, tengo la opción de agregar tarea con la tecla enter, poder eliminarlas con la X.
Todo esto dentro de un tr, y tengo un checkbox, que lo que quiero es que al presionar cada checkbox, todo el tr.lista se le agreguen unos estilos que están con la clase .complete, pero únicamente al tr que seleccione en el checkbox. Intente un toggle, pero al seleccionar cualquier checkbox, todos me cambian los estilos del primer tr, igual use un foreach pero no funcionó.
HTML:
<div class="container">
<header>
<div class="content-header">
<div class="logo">
<h1>Todo</h1>
</div>
<div class="night">
<img src="images/icon-moon.svg" alt="">
</div>
</div>
</header>
<div class="buscador">
<div class="seeker-results">
<div class="seeker">
<input type="checkbox" id="checkbox">
<input type="text" id="text" placeholder="Create a new todo...">
</div>
<div id="resultados">
<table id="results" class="results">
</table>
</div>
<div class="options">
<a href="#">All</a>
<a href="#">Active</a>
<a href="#">Completed</a>
</div>
<div class="footer">
<p>Drag and drop to rearder list</p>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #e4e5f1;
}
.container {
width: 100%;
height: 200px;
background-image: url(../images/bg-mobile-light.jpg);
background-size: cover;
background-position: center;
z-index: 9999;
}
header {
width: 90%;
margin: 0 auto;
position: relative;
text-align: center;
position: relative;
}
header .content-header {
width: 100%;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-top: 30px;
margin-bottom: 30px;
}
header .content-header .logo h1 {
font-size: 1.7rem;
color: white;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 8px;
}
header .content-header .night img {
width: 18px;
cursor: pointer;
}
/** SEEKER **/
.results {
margin-top: 20px;
}
.results tr.lista {
border-bottom: 1px solid #cacde8;
padding: 10px 10px;
}
.results .lista .checkbox {
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
border: 1px solid #ddd;
-webkit-appearance: none;
outline: none;
cursor: pointer;
margin-top: 5px;
}
.results .lista .checkbox:checked {
background: #56ddff;
background: linear-gradient(176deg, #56ddff 0%, #bf58f3 100%);
}
.results .lista .value {
padding-left: 10px;
color: #393a4c;
font-size: .9rem;
font-weight: 700;
padding: 0 15px;
}
.complete {
text-decoration: line-through;
background: #e4e5f1;
border-radius: 8px;
}
.imagen {
background-image: url(../images/icon-check.svg);
}
.results .lista td span img {
position: absolute;
right: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
margin-top: 2px;
cursor: pointer;
}
table {
background: white;
background: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 8px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
lista.complete {
background: red;
}
JS:
<script>
let input = document.querySelector('#text');
let resultados = document.querySelector('#results')
input.addEventListener('keypress', datosInput);
function datosInput(){
teclaEnter = event.keyCode;
if(teclaEnter == 13){
let table = document.createElement('tr');
table.classList.add('lista');
table.innerHTML = `
<td><input type="checkbox" class="checkbox" id="checkboxDos" onChange="completo()"> </td>
<td class="value">${input.value}</td>
<td><span class="borrar"><img onClick="borrar()" src="../images/icon-cross.svg"></span></td>
`
resultados.appendChild(table);
input.value = '';
}
}
function borrar(e){
let borrar = document.querySelector('.borrar');
borrar.parentElement.parentElement.remove();
}
function completo(){
}
</script>