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 5Vista de la mesa oculta
ID Week_number Value 1 1 1050 1 3 3024 1 3 5623 1 3 4560 ... 4 1 4563El 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?
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">×</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); } }