將動態 HTML 表格形式轉換為 JSON

Question

我有一個具有動態行數的簡單表單，每行具有相同的字段。

<table class="table table-bordered" id="recordsTable">
   <thead>
      <tr>
         <th class="text-center">#</th>
         <th class="text-center">Name</th>
         <th class="text-center">Email</th>
         <th class="text-center">Action</th>
         <th></th>
      </tr>
   </thead>
   <tbody id="tbody">
      <tr id="R1" name="record">
         <td class="row-index text-center">
            <p>1</p>
         </td>
         <td>
            <input type="text" name="facultyName" />
         </td>
         <td>
            <input type="text" name="facultyEmail" />
         </td>
         <td>
            <select name="actionType">
               <option value="default">--None--</option>
               <option value="a1">Action 1</option>
               <option value="a2">Action 2/Withdraw</option>
               <option value="a3">Action 3</option>
            </select>
         </td>
      </tr>
      <!-- Dynamic rows appear here -->
   </tbody>
</table>

表格以表格的形式出現，但這不是嚴格的要求，所以在這里可以靈活一些。 在提交表單時，我需要將此表單數據轉換為 JSON。 我有這個 function 將表格轉換為 JSON：

function convertFormToJSON(form) {
  const array = $(form).serializeArray();
  const json = {};
  $.each(array, function () {
    json[this.name] = this.value || "";
  });
  return json;
}

但是每一行都會覆蓋前一行，所以我最終在這個 JSON 中只有最后一行數據。 我意識到我需要有一個循環和 append 每個新行數據到最終的 JSON，但我很難找到這個循環的標准。 表格行？ 或者最好不要使用表格並切換到不同的表單演示文稿？

Answer 1

這是一種簡單的非 jQuery 方法，可以使用可變數量的輸入元素從該表單中收集所有輸入數據：

 document.querySelector("button").onclick=ev=>{ let res=[...document.getElementById("tbody").children].map(tr=> Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=> [el.name,el.value]))); console.log(res); }

 input,select {width:80px;}

 <table class="table table-bordered" id="recordsTable"> <thead> <tr> <th class="text-center">#</th> <th class="text-center">Name</th> <th class="text-center">Email</th> <th class="text-center">Action</th> <th></th> </tr> </thead> <tbody id="tbody"> <tr id="R1" name="record"> <td class="row-index text-center">1</td> <td> <input type="text" name="facultyName" /> </td> <td> <input type="text" name="facultyEmail" /> </td> <td> <select name="actionType"> <option value="default">--None--</option> <option value="a1">Action 1</option> <option value="a2">Action 2/Withdraw</option> <option value="a3">Action 3</option> </select> </td> </tr> <tr id="R2" name="record"> <td class="row-index text-center">2</td> <td> <input type="text" name="facultyName" /> </td> <td> <input type="text" name="facultyEmail" /> </td> <td> <select name="actionType"> <option value="default">--None--</option> <option value="a1">Action 1</option> <option value="a2">Action 2/Withdraw</option> <option value="a3">Action 3</option> </select> </td> </tr> <tr id="R3" name="record"> <td class="row-index text-center">3</td> <td> <input type="text" name="facultyName" /> </td> <td> <input type="text" name="facultyEmail" /> </td> <td> <select name="actionType"> <option value="default">--None--</option> <option value="a1">Action 1</option> <option value="a2">Action 2/Withdraw</option> <option value="a3">Action 3</option> </select> </td> </tr> </tbody> </table> <button>collect data</button>