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

Yesterday recorded a row of dynamic join 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 few columns can be added, first to recall the key point of its implementation:

1, var row=table.insertrow (); Add a line;

2, var cell1=row.insertcell (); Add a cell; (assuming that you continue to write Var Cell2=row.insertcell () later.) is to join the second column;)

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

The above is the dynamic of yesterday's record to join a row of all, of course, can be added to delete. And today's record is the dynamic deletion. Delete a row and 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. Let's do it first. Delete a specified line: Suppose we need to delete the third row, what should we write?

So look at the code: in the HTML code, add the Method onclick= "C ()" to the Delrowbutton;

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

So let's do this, and the results are shown as:

In this way, the third row is deleted. From this we can be informed that the method of deleting a line is DeleteRow (index). Index is the number of parameters. Represents the first few lines. The number of participants from top to bottom, starting from 0, there is a special need to note: Assuming that the number is not written, then the effect and the number of participants is 1. Deletes the topmost row

So the implementation of the deletion of all rows 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 was left, and the contents were all gone. The principle we understand, the code we also realized. But there are a few things we need to note in the implementation process:

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

Presumably everyone is clear about the reason, after the deletion of a row, in the second cycle, the table has been changed. The table.rows.length also changed. However I also increased, wait for table.row.length<=i when the line does not have all the delete 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 there will be two lines, one of the solutions. Of course, according to my writing, there is also a kind of can also remove i++, know len=0 time to stop also can, but understand a little trouble

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

Next, let's record the delete column. Suppose that the line is DeleteRow (), the column is how to write it, there is no cols things. is actually the cell that was added before. Removing all cells on the same column of each row is not equivalent to deleting a column, deleting the cell is the same as adding the corresponding Deletecell ();

This assumes that 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. Let's write the implementation code:

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

The result is too obvious, so it's easy to delete all the columns. To continue implementing 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 (); Join line is insertrow ();

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

The recent work has encountered a small problem, the UML time series diagram has been unable to thoroughly understand, looks quite simple. But I can't get around that bend. Come on.

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