我已经在某个函数上坐了很长时间了.经过大量的研究和测试,我还没有想出一个最终的解决方案.
100
编辑=在下拉 Select 后显示字段
确认=使字段再次消失,并覆盖在相应单元格中字段中写入的内容,但前提是在此键入了内容
如何在相应的表格单元格中手动插入输入字段
<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>
我的表(用bootstrap装饰)和下拉 Select 看起来像这样.
100
<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
100
<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>
我知道这是通过if/else查询实现的,只是我不知道如何将下拉菜单中的 Select 与确认按钮和if结合起来
这应该是什么样子的一些屏幕截图(可视化).
101 1
101 2
不幸的是,我仍然是Javascript和HTML的初学者,希望你能帮助我.我希望我已经很好地描述和展示了一切,我为我不那么干净的英语提前道歉.Thank you!