js删除表格中的某一行(JavaScript教程：删除表格中的一行)

Introduction

Tables are a great way to represent data in a structured and organized way. However, there might be situations where we would want to delete a row from the table. Javascript can be used to accomplish this task easily. In this article, we will discuss how to delete a row from a table using Javascript.

Creating a sample table

Before we proceed with deleting rows from a table, let us first create a sample table. We will create a table with two columns and three rows, containing some sample data. Here's the code:

```

```

Deleting a row using Javascript

Now that we have created a sample table, let us proceed with deleting a row from it. We can use the deleteRow() method to delete a row from the table. The deleteRow() method takes the index of the row to be deleted as a parameter.

Here's the code to delete the second row from the sample table:

```

var table = document.getElementById("myTable");

table.deleteRow(2);

```

In the above code, we first get a reference to the table using the getElementById() method and store it in a variable called table. We then call the deleteRow() method on the table variable and pass the index of the row to be deleted, which is 2 in this case.

Deleting a row on button click

In most cases, we would want to delete a row on a user action, such as clicking a button. We can achieve this by attaching an event listener to the button using Javascript. Here's the code:

```

Delete Row

```

In the above code, we have added a button element with an onclick attribute that calls the deleteRow() function. The deleteRow() function is defined in the script tag and contains the same code that we used earlier to delete a row.

Deleting a row dynamically

We can also delete a row dynamically by selecting it using Javascript. We can use various methods to select a row, such as using the getElementsByTagName() method or the querySelector() method. Here's the code:

```

var table = document.getElementById("myTable");

var rows = table.getElementsByTagName("tr");

var index = 1; // Index of the row to be deleted, starting from 0

table.deleteRow(index);

```

In the above code, we first get a reference to the table using the getElementById() method and store it in a variable called table. We then use the getElementsByTagName() method to get an array of all the rows in the table, which we store in a variable called rows. We then select the index of the row to be deleted, which is 1 in this case. Finally, we call the deleteRow() method on the table variable and pass the index of the row to be deleted.

Conclusion

Deleting a row from a table using Javascript is a simple and straightforward task. We can either delete a row using its index or by selecting it using Javascript. With this knowledge, we can easily manipulate tables in our web pages and create dynamic user interfaces.