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

Posted 2023-03-05

【中文标题】如何仅使用 javascript 创建/添加新表行

【英文标题】：how to create/add a new table row with javascript alone

【发布时间】：2022-01-19 02:27:21

【问题描述】：

我想做什么：

---

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

ma​​in.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>

【参考方案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>