Question

创建一个表单和空表，通过DOM我应该从类Movie创建一个新对象，并将其插入空表中，并带有一个按钮以将其删除。不知道我将如何创建具有删除表格中的电影[i]的功能的按钮。对不起，我还在学习，不知道如何表达我的问题。

window.onload = function(){

    let frmMovies = document.getElementById("frmMovies");
    let txtTitle = document.getElementById("txtTitle");
    let txtYear = document.getElementById("txtYear");
    let txtGender = document.getElementById("txtGender");

    frmMovies.addEventListener("submit", function (event) {
        let newMovie = new Movies(txtTitle.value, txtYear.value, txtGender.value);
        movies.push(newMovie);
        refreshTable();
        /*let btn = document.getElementsByClassName("btn");
        btn.addEventListener("click", function (event) {
            movies.splice(x, 1);
            event.preventDefault();

       })*/
        event.preventDefault();
    })


}

function refreshTable() {
    let movieTable = document.getElementById("movieTable");
    let txt = "";
    txt = "<tr><th>TÍTULO</th><th>ANO</th><th>GÉNERO</th><th>!</th></tr>";
    for(let i = 0 ; i < movies.length; i++){
        txt += "<tr>";
        txt += "<td>" + movies[i].title + "</td>";
        txt += "<td>" + movies[i].year + "</td>";
        txt += "<td>" + movies[i].gender + "</td>";
        txt += "<td>" + "<button class='btn'>" + "Remove" + "</button>" + "</td>";
        txt += "</tr>";
    }
    movieTable.innerHTML = txt;

}

Answer 1

您可以在构建时将“{1}}属性添加到”删除“按钮。点击按钮后，它将调用一个传递当前按钮元素的函数，即onclick。

this

创建新功能，使用.removeChild()删除当前行。

let movies = [];

// etc

function refreshTable() {
    let movieTable = document.getElementById("movieTable");
    let txt = "";
    txt = "<tr><th>TÍTULO</th><th>ANO</th><th>GÉNERO</th><th>!</th></tr>";
    for(let i = 0 ; i < movies.length; i++){
        txt += "<tr>";
        txt += "<td>" + movies[i].title + "</td>";
        txt += "<td>" + movies[i].year + "</td>";
        txt += "<td>" + movies[i].gender + "</td>";
        txt += "<td>" + "<button type='button' class='btn' onclick='deleteRow(this)'>" + "Remove" + "</button>" + "</td>";
        txt += "</tr>";
    }
    movieTable.innerHTML = txt;
}

这当然是未经测试的，但你可以这样做。

Answer 2

Event Delegation是使用一个元素监听多个子/后代元素的事件的最有效方法。只需找到一组目标元素（按钮）共有的祖先（tbody）元素。

演示

// Reference the <tbody> by its tagName
var tbody = document.querySelector('tbody');

// Register the click event on <tbody> calls removeRow when clicked
tbody.addEventListener('click', removeRow, false);

// Pass through the Event Object
function removeRow(event) {
  /* Event Object property Event.target always knows which 
  || element was actually clicked. Use event.target to compare
  || or assert a true/false check in order to target the rest of
  || the DOM in reference to event.target.
  || Find the closest <tr> from event.target
  || `this` is the function owner <tbody> which removes the <tr> 
  */
  if (event.target.className === 'btn') {
    var row = event.target.closest('tr');
    this.removeChild(row);
  }
  return false;
}

<table>
  <tbody>
    <tr>
      <td>Reservoir Dogs</td>
      <td>1992</td>
      <td>Male?</td>
      <td><button class='btn'>Remove</button></td>
    </tr>
    <tr>
      <td>The Usual Suspects</td>
      <td>1995</td>
      <td>Male?</td>
      <td><button class='btn'>Remove</button></td>
    </tr>
    <tr>
      <td>Pulp Fiction</td>
      <td>1994</td>
      <td>Male?</td>
      <td><button class='btn'>Remove</button></td>
    </tr>
    <tr>
      <td>Sin City</td>
      <td>2005</td>
      <td>Male?</td>
      <td><button class='btn'>Remove</button></td>
    </tr>
    <tr>
      <td>Old Boy</td>
      <td>2003</td>
      <td>Male?</td>
      <td><button class='btn'>Remove</button></td>
    </tr>
  </tbody>
</table>

Answer 3

由于您是新手，我建议您真正专注于理解实际DOM元素与用于创建它们的HTML标记之间的区别。

DOM是确定页面上显示内容的实际机制。 HTML只是将DOM序列化为文本的一种方式，因此您可以轻松地通过网络将其发送到其他计算机。 Web浏览器解析HTML并在客户端的计算机上重新创建DOM。

DOM由JavaScript对象组成，您可以使用 Javascript操作。当您设置movieTable.innerHTML时，您正在做的是告诉浏览器：执行以下操作：

将指定的字符串解析为HTML。

删除movieTable的所有子项。

添加从指定字符串解析的新DOM元素作为movieTable的子项。

这很浪费，因为每次执行时都会重新创建整个表，即使您只是添加或删除单个元素。维护起来也很令人沮丧，因为JS不能很好地使用长字符串文字。这就是为什么像这样的东西通常由模板库处理的原因之一。

我会保持简单，并告诉你如何使用标准的DOM方法来做到这一点：

let frmMovies = document.getElementById("frmMovies"); let txtTitle = document.getElementById("txtTitle"); let txtYear = document.getElementById("txtYear"); let txtGender = document.getElementById("txtGender"); // You don't need to keep getting this every time. // Just get it once and reuse the reference. let movieTable = document.getElementById("movieTable"); frmMovies.addEventListener("submit", function (event) { // You can do this anytime, as long as you do it before your // handler returns. I usually do it right away. event.preventDefault(); // First, let's create a new table row. let movieRow = document.createElement("tr"); // Create the title cell. let titleCell = document.createElement("td"); titleCell.innerText = txtTitle.value; // Create the year cell. let yearCell = document.createElement("td"); yearCell.innerText = txtYear.value; // Create the gender cell. let genderCell = document.createElement("td"); genderCell.innerText = txtGender.value; // Create the remove button and a cell to put it in. let buttonCell = document.createElement("td"); let removeButton = document.createElement("button"); removeButton.innerText = 'Remove'; // Attach the click handler for the remove button. removeButton.addEventListener("click", function() { // This handler will form a *closure*, which will store the // reference to the movieRow, enabling you remove it by simply // calling `remove` on it. movieRow.remove(); }); // Now, let's put it all together: // Add the remove button to its cell. buttonCell.appendChild(removeButton); // Add the cells to the table row. movieRow.appendChild(titleCell); movieRow.appendChild(yearCell); movieRow.appendChild(genderCell); movieRow.appendChild(buttonCell); // Add the table row to the table. movieTable.appendChild(movieRow) });

MDN有一些非常可靠的标准HTML DOM文档，你可能想要查看：

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

添加从表中的数组中删除对象的按钮

3 个答案:

演示