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!

0
X 2022-07-11T16:01:50+03:00 0 إجابة 4 مشاهدات مبتدئ
0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب