如何仅使用 javascript 创建/添加新表行答案

【问题标题】：how to create/add a new table row with javascript alone如何仅使用 javascript 创建/添加新表行
【发布时间】：2022-01-19 02:27:21
【问题描述】：

我想做什么：

使用peopleDropdown 将新人员添加到createPerson 内的人员下拉列表中
使用peopleTable 在createPerson 中添加新的表格行

main.js：

class Dropdown {
    constructor(idSelector) {
      this.idSelector = idSelector;}
    getCurrentSelection() {
      return $(this.idSelector).val();}
    appendToDropdown(label, value) {
      $(this.idSelector).append(`<option value=${value}>${label}</option>`);}
}

class Table {
    constructor(idSelector) {
      this.selector = idSelector;
    } 
    appendRow(data) {
      let tableRows = `
        <td class="name-col"></td>
        <td class="balance-col"></td>
        <td class="consumed-col"></td>
      `;
      $(this.selector).append(`<tr id="">${tableRows}</tr>`);
    }
    modifyRow(/*define inputs*/) {}
}

const peopleDropdown = new Dropdown('#people-dropdown');
const peopleTable = new Table(`#person-table tbody`);

const allPeople = [];

const createPerson = () => {  
    let name = getNameInput();
    allPeople.push(name);
    //peopleDropDown code
    //peopleTable code
  }

我一直纠结于如何添加表格，因为我的常规做法是使用 react 作为框架。（这里不是一个选项）

HTML：

<div id="creator-row">
  <input id="name-input" placeholder="Name" />
  <button onclick="createPerson()">Create Person</button>
</div>

<div id="consume-row">
  <label for="person-list">Choose a person:</label>
  <select name="person-list" id="people-dropdown"></select>
</div>

<table id="person-table">
  <thead>
    <tr class="header-row">
      <th class="name-col">Name</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

【问题讨论】：

标签： javascript html-table

【解决方案1】：

这个sn-p只回答了如何将行添加到表中的问题

const table = document.getElementById("person-table");
const tbody = table.querySelector("tbody");
const tr = document.getElementById("tr");

// some people
const people = [{
    "name": "one",
    "balance": 1,
    "consumed": 1
  },
  {
    "name": "two",
    "balance": 2,
    "consumed": 2
  },
  {
    "name": "three",
    "balance": 3,
    "consumed": 3
  },
];

// loop through the people and add them to the table
people.forEach(p => {
  const newRow = tr.content.cloneNode(true);
  const cells = newRow.querySelectorAll("td");
  cells[0].textContent = p.name;
  cells[1].textContent = p.balance;
  cells[2].textContent = p.consumed;
  tbody.appendChild(newRow);
});

td {
  border: 1px solid #000;
}

<table id="person-table">
  <thead>
    <tr class="header-row">
      <th class="name-col">Name</th>
      <th class="balance-col">Balance</th>
      <th class="consumed-col">Consumed</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<!-- a template of the row -->
<template id="tr">
<tr>
<td class="name-col"></td>
<td class="balance-col"></td>
<td class="consumed-col"></td>
</tr>
</template>

【讨论】：