JS implementation dynamically delete the table row or column-------Day57

Yesterday recorded a row of dynamic Add table, of course, this line refers to a row of data, that is, a row of how many columns are added, and the contents of the first column can add, first to review its implementation of the key points:

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 () Later, you add the second column;)

3, cell1.innerhtml= "The contents of the first column"; fills the first cell with a value

The above is the record of the dynamic add a row of all, of course, can be added can be deleted, and today to record is the dynamic deletion, delete a row, delete a column. First look at deleting a line:

Let's start by looking at the existing table:

Thus, there is now a table of four rows and two columns, and we first implement the deletion of a specified line: Suppose we need to delete the third row, how do we write it?

So look at the code: in the HTML code, add the Method onclick= "C ()" on the Delrow button;

Function C () {var Table=document.getelementbyid ("Tad"); var len=table.rows.length;table.deleterow (len-2);// This is the penultimate line, the third row}

So let's run it, and the results are shown as:

In this way, the third row is deleted, so we can know that the method to delete a row is DeleteRow (index), index is a parameter, the number of lines, this parameter from the top down, starting from 0 , there is a special need to note: If the parameter is not written , the effect is the same as a parameter of 0, which means that the top row is deleted

This implementation to delete all lines is not the idea, so we write the code:

Function C () {var Table=document.getelementbyid ("Tad"), Var len=table.rows.length;for (var i=0;i<len;i++) {    Table.deleterow ();//can also be written as Table.deleterow (0);}}

So let's look at the results:

Only the shell of the table, the contents are all gone, the principle we understand, the code we also realized, but in the implementation process there are a few things we need to note:

1, in the loop we are the first to obtain a fixed value, var len=table.rows.length; and then I<len, not write directly i<table.rows.length;

Presumably we all understand the reason, after deleting a row, when entering the second cycle, the table has been changed, then Table.rows.length also change, but I also increased, wait until table.row.length<=i when the row did not delete all the light, In this example, the words should be i=2 when the table.rows.length is also equal to 2, then no longer deleted, so will be the remaining two lines, one solution, of course, according to my writing, the other can also be i++ removed, know len=0 when the stop can also, But it's a little tricky to understand.

2, in the loop we write is Table.deleterow () or Table.deleterow (0), rather than table.deleterow (i), and 1 of the same reason OH

Then we will record the deletion of the column, if the row is DeleteRow (), the column how to write , there is no cols thing, in fact, is the cell that was previously added Ah, each row of the same column of the cell all deleted is not equivalent to delete a column, The method of deleting the cell is the same as adding the corresponding Deletecell ();

So if you just delete the fixed column, how to write it out of the way, continue to work on the table above, delete the second column of the third row, we write the implementation code:

Function d () {var Table=document.getelementbyid ("Tad"); Table.rows[2].deletecell (1);}

The result is so obvious that it's much easier to delete all the columns so that you can 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 also followed, so that we can implement the dynamic deletion of rows and columns, we will summarize the following:

1, delete the line method: DeleteRow (); Add line is insertrow ();

2,Delete the column, that is, delete the cell , the method is: Deletecell (), and the added column is Insertcell ()

Recently work encountered a small problem, the UML time series diagram has been unable to thoroughly understand, it looks quite simple, can not be around the bend, refueling ah ...