Perform special functions with drop-down menu

I’ve been sitting on a certain function for quite some time now. After a lot of research and testing, I have not come up with a final solution. solution. The user should be able to select which table row he wants to edit with the help of a dropdown menu. Based on the dropdown selection after confirming a button, input fields should appear in the corresponding row, so that the user can correct erroneous data manually. manually in case of erroneous data. However, the input should only overwrite the respective cell if something has been typed there (input field). My table always consists of 10 rows, thus 10 dropdown selection options.

How the buttons work:

edit = make the fields appear after dropdown selection

confirm = make fields disappear again and overwrite what has been written in the fields in the respective cells but only if something has been typed there

How I manually insert input fields in the respective table cells I already know and have implemented in this way:

<script>
function createInputFields() {
  var row1 = document.getElementById("tableLKW").rows[1].cells;
  var row2 = document.getElementById("tableLKW").rows[2].cells;
  
  row1[0].innerHTML = "<input type='text' class='newInputBoxRow1'>";
  row1[1].innerHTML = "<input type='text' class='newInputBoxRow1'>";
  row2[0].innerHTML = "<input type='text' class='newInputBoxRow2'>";
}
</script>

<button onclick="createInputFields()"></button>

My table (embellished with bootstrap) and dropdown selection looks like this.

Table:

<table id="tabelleLKW" class="table table-striped table-bordered table-dark">
    <thead class="thead-light"> 
        <tr>
            <th style scope="col"><p align="center">position</th>
            <th scope="col"><p align="center">number</th>
            <th scope="col"><p align="center">driver's name</th>
            <th scope="col"><p align="center">vehicle identification</th>
            <th scope="col"><p align="center">status</span></th>
            <th scope="col"><p align="center">phone</th>
            <th scope="col"><p align="center">short code</th>
            <th scope="col"><p align="center">gate</th>
            <th scope="col"><p align="center">empties</th>
            <th scope="col"><p align="center">track</th>
            <th scope="col"><p align="center">priority</th>
            <th scope="col"><p align="center">from</th>
            <th scope="col"><p align="center">to</th>
        </tr>
    </thead>
    <tbody>
     <tr>
        <td><p align="center">1</td>
        <td><p align="center">Example Number</td>
        <td><p align="center">Example Name</td>
        <td><p align="center">placeholder vehicle identification</td>
        <td>placeholder status</td>
        <td><p align="center">placeholder number</td>
        <td><p align="center">placeholder code</td>
        <td>2</td>
        <td>placeholder empties</td>
        <td>placeholder track</td>
        <td>placeholder priority</td>
        <td>placeholder from</td>
        <td>placeholder to</td>
    </tr>
    <tr>
        <td><p align="center">2</td>
        <td><p align="center">Example Number</td>
        <td><p align="center">Example Name</td>
        <td><p align="center">placeholder vehicle identification</td>
        <td>placeholder status</td>
        <td><p align="center">placeholder number</td>
        <td><p align="center">placeholder code</td>
        <td>2</td>
        <td>placeholder empties</td>
        <td>placeholder track</td>
        <td>placeholder priority</td>
        <td>placeholder from</td>
        <td>placeholder to</td>
    </tr>
    <tr>
        <td><p align="center">3</td>
        <td><p align="center">Example Number</td>
        <td><p align="center">Example Name</td>
        <td><p align="center">placeholder vehicle identification</td>
        <td>placeholder status</td>
        <td><p align="center">placeholder number</td>
        <td><p align="center">placeholder code</td>
        <td>2</td>
        <td>placeholder empties</td>
        <td>placeholder track</td>
        <td>placeholder priority</td>
        <td>placeholder from</td>
        <td>placeholder to</td>
    </tr>
    <tr>
        <td><p align="center">4</td>
        <td><p align="center">Example Number</td>
        <td><p align="center">Example Name</td>
        <td><p align="center">placeholder vehicle identification</td>
        <td>placeholder status</td>
        <td><p align="center">placeholder number</td>
        <td><p align="center">placeholder code</td>
        <td>2</td>
        <td>placeholder empties</td>
        <td>placeholder track</td>
        <td>placeholder priority</td>
        <td>placeholder from</td>
        <td>placeholder to</td>
      </tr>
    .. etc

Dropdown:

<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>
    <option value="row2" id="choice2">Table Row 2</option>
    <option value="row3" id="choice3">Table Row 3</option>
    <option value="row4" id="choice4">Table Row 4</option>
</select>

I know that one implements this with the if/else query, only I don’t know exactly how to combine the selection from the dropdown with the confirmation button and the if else query. Surely one connects the if/else query with the ID’s of the respective options of the dropdowns.

Some screenshots (visualizations) of how this should look like.

before the selection: 1

after the selection: 2

Unfortunately I am still a beginner in Javascript and HTML and hope that you can help me. I hope that I have described and shown everything well and I apologize in advance for my not so clean English. Thank you!

Answer

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.

Advertisement

Answer

Dropdown and button