我已经在某个函数上坐了很长时间了.经过大量的研究和测试,我还没有想出一个最终的解决方案.

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!

推荐答案

下拉菜单和按钮

<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 ...
    }
});

我添加了一个代码笔here.希望你能以此为例,从这里继续前进.

Javascript相关问答推荐

Vue v模型检测父参考更改

以逗号分隔的列表来数组并填充收件箱列表

如何在react + react路由域名中使用DeliverBrowserRouter?

积分计算和 colored颜色 判断错误

为什么JavaScript双边字符串文字插值不是二次的?

一次仅播放一个音频

Cypress -使用commands.js将数据测试id串在一起失败,但在将它们串在一起时不使用命令有效

Google图表时间轴—更改hAxis文本 colored颜色

当点击注册页面上的注册按钮时,邮箱重复

用于在路径之间移动图像的查询

当用户点击保存按钮时,如何实现任务的更改?

在css中放置所需 colored颜色 以填充图像的透明区域

VSCode中出现随机行

JavaScript不重定向配置的PATH

使用NextJS+MongoDB+Prisma ORM获取无效请求正文,无法发布错误

为什么我的按钮没有从&q;1更改为&q;X&q;?

与svg相反;S getPointAtLength(D)-我想要getLengthAtPoint(x,y)

Cherrio JS返回父div的所有图像SRC

用另一个带有类名的div包装元素

如何使用Cypress在IFRAME中打字