查找突变字段值-解网

问：

如何将，，值放入数组中？ppricepweightpname

我无法从 Javascript 获取输入字段值，因为输入字段是动态创建的。我尝试使用MutationObserver，但我失败了。请帮帮我。

let tbody = document.querySelector('#tbody');
let addBtn = document.querySelector('#addBtn');
let IdString = "tablerow";
let i = 4;

function creatTableEl(id, pname, pweight, pprice) {
  const createTR = document.createElement("tr");
  createTR.setAttribute("id", id);
  tbody.appendChild(createTR);
  const createTD1 = document.createElement("td");
  const createTD2 = document.createElement("td");
  const createTD3 = document.createElement("td");
  const createTD4 = document.createElement("td");
  createTR.append(createTD1, createTD2, createTD3, createTD4);
  const createInputField1 = document.createElement("input");
  createTD1.appendChild(createInputField1);
  createInputField1.setAttribute("type", "text");
  createInputField1.setAttribute('id', pname);
  const createInputField2 = document.createElement("input");
  createTD2.appendChild(createInputField2);
  createInputField2.setAttribute("type", "text");
  createInputField2.setAttribute('id', pweight);
  const createInputField3 = document.createElement("input");
  createTD3.appendChild(createInputField3);
  createInputField3.setAttribute("type", "number");
  createInputField3.setAttribute("id", pprice);
  createTD4.setAttribute("id", "Delete");
  createTD4.innerHTML = "&#10006";
  createTD4.addEventListener("click", DeleteCells);

  function DeleteCells() {
    const deleteCellIDs = createTR.getAttribute("id");
    createTR.remove(deleteCellIDs);
  }
  return createTR;
}

function addTableRowBtn() {
  let id = IdString + i;
  let pname = 'pname' + i;
  let pweight = 'pweight' + i;
  let pprice = 'pprice' + i;
  i++;
  const tableEle = creatTableEl(id, pname, pweight, pprice);
  tbody.insertBefore(tableEle, addBtn);
}

function Table() {
  for (let y = 0; y < 4; y++) {
    let id = IdString + y;
    let pname = 'pname' + y;
    let
      pweight = 'pweight' + y;
    let pprice = 'pprice' + y;
    const
      constTableEle = creatTableEl(id, pname, pweight, pprice);
    tbody.insertBefore(constTableEle, addBtn);
  }
  addBtn.addEventListener("click", addTableRowBtn);
}

Table();

<table class="form-control" name='details'>
  <thead>
    <tr>
      <th class="text-center ">Name</th>
      <th class="text-center">Weight</th<th class="text-center">Price</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr class="addBtn " id="addBtn" style="text-align: center;">
      <td colspan="3"><i class="bi bi-plus-circle">+</i></td>
    </tr>
  </tbody>
</table>

JavaScript 突变

这是我的 html： <table class=“form-control” name='details'> <thead><tr><th class=“text-center ”>Name</th><th class=“text-center”>Weight</th<th class=“text-center”>Price</th></tr></thead> <tbody id=“tbody”><tr class=“addBtn ” id=“addBtn” style=“text-align：中心;”><td colspan=“3”><i class=“bi bi-plus-circle”></i></td></tr> </tbody> </table>

1赞 Sebastian Kaczmarek 11/17/2023

请将您的 HTML 添加到问题中

1赞 Rory McCrossan 11/17/2023

请编辑问题以包含您的 HTML。不要将其转储到评论中。

0赞 mykaf 11/17/2023

动态输入创建究竟是如何阻止您获取其值的？

0赞 Chris G 11/17/2023

您甚至没有做任何事情来尝试检索这些输入字段的值

答：

1赞 Rory McCrossan 11/17/2023 #1

表是动态创建的，这并不妨碍您检索字段值。您可以通过遍历 with 中的元素来构建包含每行值的对象数组来实现此目的。trtbodymap()

事实上，你可以做很多事情来提高你的代码质量：

在 HTML 中使用元素可以避免编写大量不必要的 JS 代码来创建重复的 HTML 结构。将模板释放一次，然后根据需要注入。<template>
将“添加行”按钮移入，以便仅包含您的字段行，这使得使用它们变得更加容易，因为它们是分开的。tfoottbodyinput
不要在动态内容中使用重复的属性值。无效的重复项。id
在循环创建 HTML 内容时不要创建增量属性值。它非常复杂，因为不需要属性来定位您需要的内容 - 如下例所示。idid
将所有样式放在外部 CSS 样式表中，而不是在 HTML 中内联。
使用实际的可点击元素（例如或）来触发事件。不要只是将事件处理程序附加到任意容器，例如 .<a /><button />td
使用委托事件处理程序将单个事件处理程序分配给所有需要它的元素。您无需在循环的每次迭代中定义新函数

完成所有这些调整后，请尝试以下工作示例：

const tbody = document.querySelector('table tbody');
const addButtonRow = document.querySelector('#add-button-row');
const rowTemplate = document.querySelector('#row-template').innerHTML;
const addButton = document.querySelector('.add-button');
const outputButton = document.querySelector('#output-button');

const addTableRow = () => tbody.innerHTML += rowTemplate;
const removeTableRow = e => e.target.closest('tr').remove();
const generateTableBody = () => {
  for (let y = 0; y < 4; y++) {
    addTableRow();
  }
}
const generateOutputArray = () => Array.from(tbody.querySelectorAll('tr')).map(tr => ({
  pname: tr.querySelector('.pname').value,
  pweight: tr.querySelector('.pweight').value,
  pprice: tr.querySelector('.pprice').value
}));

addButton.addEventListener('click', addTableRow);
tbody.addEventListener('click', e => {
  if (e.target.classList.contains('delete'))
    removeTableRow(e);
})
outputButton.addEventListener('click', () => {
  console.log(generateOutputArray());
});

generateTableBody();

#add-button-row {
  text-align: center;
}

a {
  text-decoration: none;
}

<table class="form-control" name="details">
  <thead>
    <tr>
      <th class="text-center">Name</th>
      <th class="text-center">Weight</th>
      <th class="text-center">Price</th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr id="add-button-row">
      <td colspan="3">
        <a href="#" class="add-button"><i class="bi bi-plus-circle">+</i></a>
      </td>
    </tr>
  </tfoot>
</table>

<template id="row-template">
  <tr>
    <td><input type="text" name="pname" class="pname" /></td>
    <td><input type="text" name="pweight" class="pweight" /></td>
    <td><input type="number" name="pprice" class="pprice" /></td>
    <td><a href="#" class="delete">&#10006</a></td>
  </tr>
</template>

<button id="output-button">Build Array</button>

查找突变字段值

finding mutated field value

评论

评论