Question

我有一个数组，我在一个表中调用它，现在我想做一个按钮，如果你点击这个按钮，最后一个数组被删除，但它对我不起作用

const show = document.querySelector("#show");
const ul = document.querySelector("ul");
const table = document.querySelector("table")

var th = `
    <th> name</th> 
    <th> Alter</th> 
    <th> Beruf</th> 
    <th>  <div id="reverss"> Revers</div>  </th> `;

const schule = [

  {
    name: "Sam ",
    Alter: "80",
    Beruf: "Mediengestalter"
  },
  {
    name: "Alm",
    Alter: "26",
    Beruf: "PTA"
  },
  {
    name: "Chris",
    Alter: "18",
    Beruf: "AZUBI"
  },
  {
    name: "Smith",
    Alter: "4",
    Beruf: "OKA"
  }
]

table.innerHTML += th + schule.map(info =>
  ` <tr> <td>   ${info.name} </td> <td> ${info.Alter}</td> <td> ${info.Beruf} </td> </tr> <br>`

)

const rever = document.querySelector("#reverss").addEventListener("click", samee);

function samee() {

  schule.pop();
}

Answer 1

您的数组并没有神奇地绑定到表标记。您必须自己更改表格内容（或者使用具有数据绑定的框架，例如 Vue、React 或 Angular）。将生成表格内容的代码移到一个函数中，并在最初调用一次，在更改数组后调用一次。
从语义上讲，#reverss 应该是一个 <button> 元素。如果您希望它看起来像普通文本（也不推荐这样做，因为用户不会看到它是可点击的元素），请使用 CSS 覆盖样式。
您需要在 join() 之后添加 map()，否则，您将进行隐式数组到字符串转换，从而导致表格后出现悬空的逗号。
在 <br> 之后不需要（而且实际上是无效标记）一个 <tr>，换行符会自动发生。
您忘记了表格标题周围的 <tr></tr>。此外，标题行 (4) 中的列数应与每行中的单元格数相匹配（为：3）。向每一行添加一个空列，或使用 colspan 属性。

const show = document.querySelector("#show");
const ul = document.querySelector("ul");
const table = document.querySelector("table")

var th = `<tr>
    <th> name</th> 
    <th> Alter</th> 
    <th> Beruf</th> 
    <th>  <button id="reverss"> Revers</button>  </th>
  </tr>`;

const schule = [ {name: "Sam ",Alter: "80",Beruf: "Mediengestalter"},{name: "Alm",Alter: "26",Beruf: "PTA"},{name: "Chris",Alter: "18",Beruf: "AZUBI"},{name: "Smith",Alter: "4",Beruf: "OKA"} ]

function populateTable() {
  table.innerHTML = th
  table.innerHTML += schule.map(info =>
    `<tr> <td>   ${info.name} </td> <td> ${info.Alter}</td> <td> ${info.Beruf} </td> <td></td> </tr>`

  ).join('')
  document.querySelector("#reverss").addEventListener("click", samee);
}
populateTable();

function samee() {
  schule.pop();
  populateTable();
}

<table>
</table>

如何通过单击从 Array 中删除元素

1 个答案: