从动态 html 表中提取值

Question

在我的 nodejs express 项目中，我的应用程序中有一个动态表，我可以在其中添加或删除行，用户可以在单元格内输入值，现在我想提取这个值，但不知道从表中提取这个值后如何插入他们进入MySQL数据库

注意如果可能我不想使用 jquery

表格

function addRow() {

  var table = document.getElementById("cargoTable");

  var row = table.insertRow(-1);

  var cell1 = row.insertCell(0);

  var cell2 = row.insertCell(1);

  var cell3 = row.insertCell(2);

  var cell4 = row.insertCell(3);

  var cell5 = row.insertCell(4);

  var cell6 = row.insertCell(5);

  var cell7 = row.insertCell(6);

  var cell8 = row.insertCell(7);

  var cell9 = row.insertCell(8);

  cell1.innerHTML = '<label onclick="deleteRow(this)" style="cursor:pointer">-</label>';

  cell2.innerHTML = '<input class="w3-input" type="text">';

  cell3.innerHTML = '<input class="w3-input" type="text">';

  cell4.innerHTML = '<input class="w3-input" type="text">';

  cell5.innerHTML = '<input class="w3-input" type="text">';

  cell6.innerHTML = '<input class="w3-input" type="text">';

  cell7.innerHTML = '<input class="w3-input" type="text">';

  cell8.innerHTML = '<input class="w3-input" type="text">';

  cell9.innerHTML = '<input class="w3-input" type="text">';

}

function deleteRow(r) {

  var i = r.parentNode.parentNode.parentNode.rowIndex;

  document.getElementById("cargoTable").deleteRow(i);

}

<table class="w3-table w3-hoverable w3-bordered w3-card">

  <thead>

    <td onclick="addRow()" style="cursor:pointer">+</td>

    <td>Comodity</td>

    <td>Marks</td>

    <td>Description</td>

    <td>Pkg.No</td>

    <td>Pkg.Kg</td>

    <td>Total Bags</td>

    <td>Total Weigh</td>

    <td>Remarks</td>

  </thead>

  <tbody id="cargoTable"></tbody>

</table>

Answer 1

我在这里看不到 node.js你可以简化这个这是获取/发布到 mySql 的方法。忽略 JS 的反应。抓取是一样的如何在 React.js 中使用 Fetch API 将数据发布到数据库let table, names;window.addEventListener("load", () => {&nbsp; document.getElementById("add").addEventListener("click", addRow)&nbsp; document.getElementById("save").addEventListener("click", save)&nbsp; table = document.getElementById("cargoTable");&nbsp; names = [...document.getElementById("thead").querySelectorAll("th")].map(th => th.innerText).slice(1)&nbsp;&nbsp;&nbsp; table.addEventListener("click", e => {&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; if (tgt.classList.contains("del")) tgt.closest("tr").remove();&nbsp; })});const addRow = () => {&nbsp; table.innerHTML += `<td><label class="del" style="cursor:pointer">-</label></td>&nbsp; <td><input class="w3-input" type="text"></td>&nbsp; <td><input class="w3-input" type="text"></td>&nbsp; <td><input class="w3-input" type="text"></td>&nbsp; <td><input class="w3-input" type="text"></td>&nbsp; <td><input class="w3-input" type="text"></td>&nbsp; <td><input class="w3-input" type="text"></td>&nbsp; <td><input class="w3-input" type="text"></td>&nbsp; <td><input class="w3-input" type="text"></td>`;};const save = () => {&nbsp; const vals = [...table.querySelectorAll("tr")]&nbsp; &nbsp; .map(row => [...row.querySelectorAll("input")]&nbsp; &nbsp; &nbsp; .map((inp, i) => ({ [names[i]]: inp.value})));&nbsp; console.log(vals); // here you need to ajax to the server;&nbsp;&nbsp;&nbsp; /* for example&nbsp;&nbsp;&nbsp; &nbsp;fetch('your post url here', {&nbsp; &nbsp; method: 'POST',&nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; 'Accept': 'application/json',&nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json'&nbsp; &nbsp; },&nbsp; &nbsp; body: JSON.stringify(vals)&nbsp; })&nbsp; .then(res => res.json())&nbsp; .then(data => console.log(data))&nbsp; .catch(err => console.log(err);&nbsp; */&nbsp;};<table class="w3-table w3-hoverable w3-bordered w3-card">&nbsp; <thead id="thead">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th id="add" style="cursor:pointer">+</th>&nbsp; &nbsp; &nbsp; <th>Comodity</th>&nbsp; &nbsp; &nbsp; <th>Marks</th>&nbsp; &nbsp; &nbsp; <th>Description</th>&nbsp; &nbsp; &nbsp; <th>Pkg.No</th>&nbsp; &nbsp; &nbsp; <th>Pkg.Kg</th>&nbsp; &nbsp; &nbsp; <th>Total Bags</th>&nbsp; &nbsp; &nbsp; <th>Total Weigh</th>&nbsp; &nbsp; &nbsp; <th>Remarks</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="cargoTable"></tbody></table><button type="button" id="save">Save</button>

Answer 2

亲爱的，感谢您的回答，但是由于我希望根据后端的要求将结果放在一个数组中，因此我认为以下答案对我来说是正确的我已经为每个单元格分配了相同的名称并通过 javascript 调用它们&nbsp; &nbsp; function addRow() {&nbsp; &nbsp; var table = document.getElementById("cargoTable");&nbsp; &nbsp; var row = table.insertRow(-1);&nbsp; &nbsp; var cell1 = row.insertCell(0);&nbsp; &nbsp; var cell2 = row.insertCell(1);&nbsp; &nbsp; var cell3 = row.insertCell(2);&nbsp; &nbsp; var cell4 = row.insertCell(3);&nbsp; &nbsp; var cell5 = row.insertCell(4);&nbsp; &nbsp; var cell6 = row.insertCell(5);&nbsp; &nbsp; var cell7 = row.insertCell(6);&nbsp; &nbsp; var cell8 = row.insertCell(7);&nbsp; &nbsp; var cell9 = row.insertCell(8);&nbsp; &nbsp; cell1.innerHTML = '<label onclick="deleteRow(this)" style="cursor:pointer">-</label>';&nbsp; &nbsp; cell2.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';&nbsp; &nbsp; cell3.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';&nbsp; &nbsp; cell4.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';&nbsp; &nbsp; cell5.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';&nbsp; &nbsp; cell6.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';&nbsp; &nbsp; cell7.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';&nbsp; &nbsp; cell8.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';&nbsp; &nbsp; cell9.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';}&nbsp; &nbsp; function documentTabelData(){&nbsp; &nbsp; var cellData1 = document.getElementsByName("cellDocument");&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; var data1 = [];&nbsp; &nbsp; while(i<cellData1.length){&nbsp; &nbsp; &nbsp; &nbsp; data1.push(cellData1[i++].value);&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById("docTdata").value = data1;&nbsp; &nbsp;&nbsp;}