I have 2 tables in HTML output. One is hidden. I want to use JavaScript to make it so that when I select a row with a value with the mouse, a window opens and the value from the second hidden table is shown. How can I do that?
View of open table
ID Week_1 Week_2 Week_3 Week_4
1 1 3
2 3 1 1
3 2
4 1 5
View of hidden table
ID Week_number Value
1 1 1050
1 3 3024
1 3 5623
1 3 4560
...
4 1 4563
The code I use to select a cell.
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();
How can I replace the selected id with other values from the hidden table?
I resolved partially the problem. This is the code.
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 );
});
})
});
Now I need to change values in the row by click or may be open modal window with the ID numbers. Any suggetions?
Update. Finally I did this with a modal window.
<!-- 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);
}
}