Js allows you to dynamically Delete rows or columns of a table ------- Day57

Yesterday, we recorded a row for dynamically adding a table. Of course, this row refers to a row of data, that is, the number of columns in a row is also added, and the content of the first column can be added, let's review the key points of its implementation:

1. var row = table. insertRow (); add a row;

2. var cell1 = row. insertCell (); add a cell. (If you continue to write var cell2 = row. insertCell (), add the second column ;)

3. cell1.innerHTML = "content in the first column"; enter "recharge" in the first cell.

The above is all the rows that were dynamically added to the record yesterday. Of course, the record can be deleted after the record is added. Today, the record is dynamically deleted, one row is deleted, and one column is deleted. First, delete a row:

Let's first look at the existing table:

Now there is a table with four rows and two columns.To delete a specified row:Suppose we need to delete the third row, how should we write it?

Let's take a look at the code: in the html code, add the onclick = "c ()" method on the delRow button ()";

Function c () {var table = document. getElementById ("tad"); var len = table. rows. length; table. deleteRow (len-2); // here the last row is deleted, that is, the third row}

In this case, the result is as follows:

In this way, the third row is deleted. We can know that the method for deleting a row is deleteRow (index), and index is the parameter, which indicates the row number.From top down, starting from 0And pay special attention to the following points:If the parameter is not written, the result is the same as that of the parameter 0, indicating that the top row is deleted.

This implementationDelete all rowsLet's write down the Code:

Function c () {var table = document. getElementById ("tad"); var len = table. rows. length; for (var I = 0; I <len; I ++) {table. deleteRow (); // You can also write it as a table. deleteRow (0 );}}

Let's look at the result:

Only the table shell is left, and the content in the table is gone. We understand the principle and the code is also implemented. However, we need to pay attention to the following points during the implementation process:

1. in a loop, we first obtain a fixed value, var len = table. rows. length; then I <len, instead of writing I <table. rows. length;

Everyone must understand the reason. After deleting a row, the table has changed when it enters the second cycle. rows. length also changed, but I also increased, wait until table. row. when the length is <= I, the rows are not all deleted. In this example, the rows are table when I = 2. rows. if the length is equal to 2, it will not be deleted, so there will be the remaining two rows. One of the solutions is to write as per me, the other method can also remove I ++. It can also be stopped when len = 0, but it is a little troublesome to understand.

2. In the loop, we write table. deleteRow () or table. deleteRow (0) instead of table. deleteRow (I), which is the same as the reason in 1.

Next we will record the deletion column. If the row is deleteRow,How to write a column?There is no such thing as cols. In fact, it is the previously added cells. Deleting all the cells in the same column of each row is equivalent to deleting a column, the method for deleting a cell is also corresponding to deleteCell ();

In this way, if we delete only the fixed columns, we will be eager to write them. continue to operate on the table above and delete the second column in the third row. Let's write down the implementation code:

function d(){var table=document.getElementById("tad");table.rows[2].deleteCell(1);}

This result is too obvious, so it is much easier to delete all columns to continue to implement the following code:

function d(){var table=document.getElementById("tad");for(var i=0;i<table.rows.length;i++){table.rows[i].deleteCell(1);}}

This result is followed, so that we can dynamically Delete rows and columns. Let's sum up the following:

1. Method for deleting rows: deleteRow (); insertRow () for adding rows ();

2Delete columns, that is, deleting Cells, The method is: deleteCell (); while the method for adding a column is insertCell ()

I encountered a small problem recently. I can't fully understand the uml sequence diagram. It looks quite simple, but I can't get around that bend. Come on...