使用Javascript回圈表格形式并從值創建物件

我試圖遍歷表并從每一行創建物件。每行包含 2 個輸入欄位，其中的值應該是物件的屬性。截至目前，我能夠獲取值，但只能從第一行獲取。

編輯：我現在可以看到所有的值。請查看 JS 檔案注釋以了解我現在想要完成的作業。感謝到目前為止的幫助！

網址：

<form action="/reg" method="POST" class="myForm">

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Markera</th>
      <th scope="col">Anv?ndarnamn</th>
      <th scope="col">Namn</th>
      <th scope="col">Omd?me i Canvas</th>
      <th scope="col">Examinationsdatum</th>
    </tr>
  </thead>
  <tbody>
    {{#each userArray}}
    <tr class="the_row">
      <th scope="row">1</th>
      <td><input type="checkbox" name="box" value="marked" 
      class="isSelected"/></td>
      <td><input type="text" name="username" value=" 
      {{this.userName}}" readonly /></td>
      <td>{{this.firstName}}</td>
      <td>{{this.grade}}</td>
      <td><input type="text" name="date"/></td>
    </tr>
    {{/each}}
  </tbody>
</table>
<button id="btn" type="submit">SEND</button>
</form>

JS：

let users = [];

$("#btn").on("click", function () {
  event.preventDefault();

  var x = 0;
  $(".the_row :input").each(function () {
    console.log(this.value);

    let key = this.name;

    let user = {
      [key]: this.value,
    };

   users.push(user);

/*For each ROW, i want to take input values and create an object of 
   it, which will be added to array "users".
*/

/*
 The above should only apply to the rows where the checkbox is 
 CHECKED
 */

 
});

console.log(users);
});

輸出：它為每個輸入創建一個物件。我明白為什么，但這不是我需要的。

(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {box: 'marked'}
1: {username: 'Fredrik1337'}
2: {date: ''}
3: {box: 'marked'}
4: {username: 'Erik183'}
5: {date: ''}
6: {box: 'marked'}
7: {username: 'Sven'}
8: {date: ''}
length: 9
[[Prototype]]: Array(0)

uj5u.com熱心網友回復：

如果您只是提交表單，則可以使用FormData收集欄位名稱及其值，然后將其轉換為物件。

const form = document.querySelector('.myForm')

form.addEventListener('submit', (e) => {
  e.preventDefault()
  const object = {};
  const myFormData = new FormData(form)
  myFormData.forEach((value, key) => object[key] = value);
  console.log(object)
})

<form class="myForm">
  <table>
    <tbody>
      <tr>
        <th>1</th>
        <td><label>checkbox: <input type="checkbox" name="row1checkbox"/></label></td>
        <td><label>text: <input type="text" name="row1text" /></label></td>
      </tr>
      <tr>
        <th>2</th>
        <td><label>checkbox: <input type="checkbox" name="row2checkbox"/></label></td>
        <td><label>text: <input type="text" name="row2text" /></label></td>
      </tr>
      <tr>
        <th>3</th>
        <td><label>checkbox: <input type="checkbox" name="row3checkbox"/></label></td>
        <td><label>text: <input type="text" name="row3text" /></label></td>
      </tr>
    </tbody>
  </table>
  <button type="submit">submit</button>
</form>

uj5u.com熱心網友回復：

一個（不是最小但）可重現的示例，用于根據檔案中輸入/選擇元素的當前值創建物件。

getMyValues();

const handle = evt => {
  if (/input|select/i.test(evt.target.nodeName)) {
    return getMyValues();
  };
}
document.addEventListener(`click`, handle);
document.addEventListener(`keyup`, handle);

function getMyValues() {
const valuesObj = [...document.querySelectorAll('input, select')]
  .reduce( (acc, inp) => {
    if (inp.type === "radio") {
      acc[inp.name] = inp.value || `nothing selected yet`;
    }

    if (inp.type === "checkbox") {
      acc[inp.id] = inp.checked ? inp.value : `NOT:${inp.value}`;
    }

    if (/text|number/i.test(inp.type)) {
      acc[inp.id] = inp.value || `empty`;
    }
    if (inp.constructor === HTMLSelectElement) {
      acc[inp.id] = inp.value;
    }
    
    return acc;
  }, {});

document.querySelector(`pre`).textContent = `Your values:\n${
  JSON.stringify(valuesObj, null, 2)}`;
  }

body {
  font: 12px/15px normal verdana, arial;
  margin: 2rem;
}

pre {
  position: absolute;
  width: 45vw;
  left: 50vw;
  top: 1rem;
  padding: 5px;
  border: 1px solid #AAA;
}

input,
select {
  margin-bottom: 6px;
}

<pre></pre>
<p>
  <input type="number" value="4" id="someNumber"> some number<br>
  <input type="checkbox" value="cb4" id="someCheckbox"> some checkbox<br>
  <input type="text" placeholder="some text" id="someText" value="tx txt text"> some text<br>
  <input type="text" placeholder="some text" id="someText2"> some text<br>
  <select id="selectSome">
    <option value="v1">v1</option>
    <option value="v2" selected>v2</option>
    <option value="v3">v3</option>
  </select><br>
  <select id="selectSome2">
    <option value="nothing selected yet">select one</option>
    <option value="vv1">vv1</option>
    <option value="vv2">vv2</option>
    <option value="vv3">vv3</option>
  </select><br>
  <input type="radio" name="someRadio" value="r1"> r1<br>
  <input type="radio" name="someRadio" value="r2"> r2<br>
  <input type="radio" name="someRadio" value="r3" checked> r3
</p>

標籤：javascript 查询 把手.js

上一篇：如何在分隔符和輸入到新列之間多次提取字串的一部分T-SQL

下一篇：使用startsWith()-jQuery在元素中定義值范圍