第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

從動態(tài) html 表中提取值

從動態(tài) html 表中提取值

RISEBY 2023-03-10 16:42:48
在我的 nodejs express 項目中，我的應(yīng)用程序中有一個動態(tài)表，我可以在其中添加或刪除行，用戶可以在單元格內(nèi)輸入值，現(xiàn)在我想提取這個值，但不知道從表中提取這個值后如何插入他們進入MySQL數(shù)據(jù)庫注意如果可能我不想使用 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>
查看完整描述

2 回答

?
墨色風(fēng)雨

TA貢獻1853條經(jīng)驗 獲得超6個贊

我在這里看不到 node.js

你可以簡化這個

這是獲取/發(fā)布到 mySql 的方法。忽略 JS 的反應(yīng)。抓取是一樣的

如何在 React.js 中使用 Fetch API 將數(shù)據(jù)發(fā)布到數(shù)據(jù)庫

let table, names;

window.addEventListener("load", () => {

  document.getElementById("add").addEventListener("click", addRow)

  document.getElementById("save").addEventListener("click", save)

  table = document.getElementById("cargoTable");

  names = [...document.getElementById("thead").querySelectorAll("th")].map(th => th.innerText).slice(1)  

  table.addEventListener("click", e => {

    const tgt = e.target;

    if (tgt.classList.contains("del")) tgt.closest("tr").remove();

  })

});

const addRow = () => {

  table.innerHTML += `<td><label class="del" style="cursor:pointer">-</label></td>

  <td><input class="w3-input" type="text"></td>

  <td><input class="w3-input" type="text"></td>

  <td><input class="w3-input" type="text"></td>

  <td><input class="w3-input" type="text"></td>

  <td><input class="w3-input" type="text"></td>

  <td><input class="w3-input" type="text"></td>

  <td><input class="w3-input" type="text"></td>

  <td><input class="w3-input" type="text"></td>`;

};

const save = () => {

  const vals = [...table.querySelectorAll("tr")]

    .map(row => [...row.querySelectorAll("input")]

      .map((inp, i) => ({ [names[i]]: inp.value})));

  console.log(vals); // here you need to ajax to the server;

  

  /* for example

  

   fetch('your post url here', {

    method: 'POST',

    headers: {

      'Accept': 'application/json',

      'Content-Type': 'application/json'

    },

    body: JSON.stringify(vals)

  })

  .then(res => res.json())

  .then(data => console.log(data))

  .catch(err => console.log(err);

  */ 

};

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

  <thead id="thead">

    <tr>

      <th id="add" style="cursor:pointer">+</th>

      <th>Comodity</th>

      <th>Marks</th>

      <th>Description</th>

      <th>Pkg.No</th>

      <th>Pkg.Kg</th>

      <th>Total Bags</th>

      <th>Total Weigh</th>

      <th>Remarks</th>

    </tr>

  </thead>

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


</table>

<button type="button" id="save">Save</button>


查看完整回答
反對 回復(fù) 2023-03-10
?
元芳怎么了

TA貢獻1798條經(jīng)驗 獲得超7個贊

親愛的，感謝您的回答，但是由于我希望根據(jù)后端的要求將結(jié)果放在一個數(shù)組中，因此我認(rèn)為以下答案對我來說是正確的我已經(jīng)為每個單元格分配了相同的名稱并通過 javascript 調(diào)用它們


    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 name="cellCargo" class="w3-input" type="text">';

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

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

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

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

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

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

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


}


    function documentTabelData(){

    var cellData1 = document.getElementsByName("cellDocument");

    var i = 0;

    var data1 = [];

    while(i<cellData1.length){

        data1.push(cellData1[i++].value);

    }

    document.getElementById("docTdata").value = data1;

    

}


查看完整回答
反對 回復(fù) 2023-03-10
  • 2 回答
  • 0 關(guān)注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號