我想将多选选项表单的值插入到同一个表单元格中。
select表单位于表中，因此我使用 const selectThing = [...document.getElementById('tableIdName').querySelectorAll("#selectIdName :checked")] 到目前为止，这是可行的。
因此：
我有一张table，在那里我可以选择多选
我选择了一些东西并按下“添加”按钮
按钮函数将一个新表行添加到另一个表中，并为每个选定选项创建单元格。
但我想把它们都插入同一个单元格。我不希望我的代码为每个选定选项添加单元格。但是怎么做呢？
我就是想不出正确的代码是什么。
请随意查看代码！

function add() {
  const inputs = [...document.getElementById('inputs').querySelectorAll("input")]; 
  const selectFruit = [...document.getElementById('inputs').querySelectorAll("#fruit :checked")]; 

  if (isFormValid(inputs)) { 
    const table = document.getElementById('table')
    const newRowIdx = table.rows.length
    const rowId = `row_${newRowIdx}_${Date.now()}`
    const row = table.insertRow(newRowIdx)
    row.id = rowId

    inputs.forEach((input, idx) => {
      const cell = row.insertCell(idx)
      cell.appendChild(formatInputValue(input))
    })

    selectFruit.forEach((input, idx) => { 
      const cell = row.insertCell()

      cell.appendChild(formatInputValue(input))
    })

    const actions = { 
      Delete: () => {
        const row = document.getElementById(rowId)
        row.parentNode.removeChild(row)
      }
    }

    const actionCell = row.insertCell()
    actionCell.appendChild(formatActionButtons(actions))
    resetInputs(inputs)

  }
}

function formatInputValue(input) {
  return document.createTextNode(input.value)
}

function formatActionButtons(buttons) {
  const wrapper = document.createElement('div')

  Object.entries(buttons).forEach(([action, onclick]) => {
    let button = document.createElement('button')
    button.innerText = action
    button.onclick = onclick
    button.id="jsButtonStyle";
    wrapper.appendChild(button)
  })

  return wrapper
}
function isFormValid(inputs) {
  return inputs.filter(input => input.value === "").length === 0
}

function resetInputs(inputs) {
  inputs.forEach(input => input.value = "")
}

<table id="inputs">
  <tr>
    <th><label>Name:*</label></th>
    <th><label>Fruit:*</label></th>
  </tr>
  <tr>
    <td><input type="text" id="name" required></td>
         <option value="" selected disabled>Choose Fruit</option>
    <td><select  type="text" id="fruit" multiple required>
         <option value="" selected disabled>Choose Fruit</option>
          <option>Apple</option>
          <option >Plum</option></select>
      </td>
  </tr>
</table>

<div>
  <button id="button" onclick="add()">Add</button>
</div>

<div>
<h2>Here:</h2>
<table id="table" border="2">
  <tr>
    <th>Name</th>
    <th>Fruit</th>
  </tr>
</table>
</div>