• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

123
Views
Mostrar el valor de la segunda tabla oculta al hacer clic en la primera tabla abierta

Tengo 2 tablas en salida HTML. Uno está escondido. Quiero usar JavaScript para que cuando seleccione una fila con un valor con el mouse, se abra una ventana y se muestre el valor de la segunda tabla oculta. ¿Cómo puedo hacer eso?

Vista de la mesa abierta

 ID Week_1 Week_2 Week_3 Week_4 1 1 3 2 3 1 1 3 2 4 1 5

Vista de la mesa oculta

 ID Week_number Value 1 1 1050 1 3 3024 1 3 5623 1 3 4560 ... 4 1 4563

El código que uso para seleccionar una celda.

 function addRowHandlers() { var table = document.getElementById("duedate"); var rows = table.getElementsByTagName("tr"); for (i = 0; i < rows.length; i++) { var currentRow = table.rows[i]; var createClickHandler = function(row) { return function() { var cell = row.getElementsByTagName("td")[0]; var id = cell.innerHTML; alert("id:" + id); }; }; currentRow.onclick = createClickHandler(currentRow); } } window.onload = addRowHandlers();

¿Cómo puedo reemplazar la identificación seleccionada con otros valores de la tabla oculta?

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Resolví parcialmente el problema. Este es el código.

 window.addEventListener("load", function(){ Array.from(document.getElementsByClassName("t-cell")).forEach((_el)=>{ _el.addEventListener("click", function(e){ console.log(e.target.dataset) console.log(e.target.parentNode.dataset); let th = document.getElementById('t-hidden'); let trs = th.querySelectorAll('tr[data-orgunit="'+e.target.parentNode.dataset.orgunit+'"]'); console.log('trs : ', trs ); let data = Array.from( trs ).filter((_el)=> _el.dataset.week === e.target.dataset.week ); console.log('data : ', data ); let IDs = []; data.forEach(( _tr )=>{ let td = _tr.querySelectorAll('td[data-rowid]')[0]; console.log( ' td : ', td.dataset ); IDs.push( td.dataset.rowid ); }) console.log( ' IDs : ', IDs ); }); }) });

Ahora necesito cambiar los valores en la fila haciendo clic o puede abrir una ventana modal con los números de identificación. ¿Alguna sugerencia?

Actualizar. Finalmente hice esto con una ventana modal.

 <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div id="myModalContent" class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>Workflow items</h2> </div> <div id="modalLinks" class="modal-body"></div> </div> </div>
 ... console.log( ' IDs : ', IDs ); let content = document.getElementById('modalLinks'); while (content.firstChild) { content.removeChild(content.firstChild); } IDs.forEach(function( _id ){ let el = createLinkEl( _id ); content.appendChild( el ); }) var modal = document.getElementById("myModal"); modal.style.display = "block"; }); }) }); function addRowHandlers() { var table = document.getElementById("duedate"); var rows = table.getElementsByTagName("tr"); for (i = 0; i < rows.length; i++) { var currentRow = table.rows[i]; var createClickHandler = function(row) { return function() { var modal = document.getElementById("myModal"); var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } }; }; currentRow.onclick = createClickHandler(currentRow); } }
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error