no content - content deleted..
2 Answers
Dropdown and button
<label for="table-rows">Choose a table row:</label>
<select name="table-rows" id="table-row">
<option value="row1" id="choice1">Table Row 1</option>
</select>
<button>Edit</button>
// js
const button = document.querySelector('button');
const dropdown = document.querySelector('[name="table-rows"]');
// This will come to use later, you need to store the data as
// we're directly changing the HTML and you can restore it incase
// the user cancels the 'Edit'
let storedEditData = [];
button.addEventListener('click', function () {
// We add +1 to the selectedIndex here because we don't want 0th index
// 0th index is the header field
const tableRow = document.querySelector('#tabelleLKW').rows[dropdown.selectedIndex + 1];
// Now you loop through all the cells from the row that
// was selected and add an input element in it.
for (let i = 0; i < tableRow.cells.length; ++i) {
const item = tableRow.cells.item(i);
const input = document.createElement('input');
input.setAttribute('class', 'your-input-class');
// Data attribute to store the row and cell id for later
// reference. For getting input, etc.
input.setAttribute('data-cell-id', `row-${dropdown.selectedIndex + 1}-cell-${i}`);
input.value = item.innerText;
// Save data
storedEditData = tableRow.cells;
item.innerHTML = ''; // Clear the HTML
item.appendChild(input); // Append the new input
// further code ...
}
});
I've added a codepen here. Hope you can use this as an example and go forward from here.
I'm not sure I'm completely following what your problem is but is it that you are not sure how to run a function on option select? Here's a simple example if so:
<select id="osDemo" onchange="detectChange(this)">
<option value="Linux">Linux</option>
<option value="Windows">Windows</option>
<option value="MacOS">MacOS</option>
</select>
notice the 'onchange' attribute and 'detectChange()' function.
If that is not correct please let me know and I'll update my answer.
Related