The problem of selecting and deleting all the tables in JS

In the project development, because just started to do the project, I am not very proficient in JS, so in the use of JS to the form of the full selection and deletion encountered a lot of problems, and then through the search for information to solve, and then summed up the total selection of JS table and delete Some of the problems, I hope to help everyone.

Here is a small example of my own to make it easier and clearer to explain JS Select all and delete.

First, the full selection of the note: When the selected checkbox, the following 1-5 will be selected, not selected when 1-5 will not be selected, this implementation is not difficult, the steps are as follows:

1. Get the Select state of the marquee,

2, for Loop set all the Radio box selected state

Main code:

1. Get the Select All button
var chkallobj = document.getElementById ("Chkall");
2. Get all the radio boxes
var chkoneobjs = document.getelementsbyclassname ("Chkone");
3. Set Click events
Chkallobj.onclick = function () {
3.1 Get the check box selection state
var isChecked = this.checked;
3.2for Loop sets all of the Radio box's selected states
for (var i = 0; i < chkoneobjs.length; i++) {
chkoneobjs[i].checked = isChecked;
}
}

Second, full selection attention to detail

When we select 1 o'clock, the Select All button should also be selected, and when a single selection is unchecked, the Select all should not be selected.

Main code:

4.for Circular radio button

for (var i = 0; i < chkoneobjs.length; i++) {
4.1 Setting Up Click events
Chkoneobjs[i].onclick = function () {
4.2 Loop all the radio boxes
for (var j = 0; J < Chkoneobjs.length; J + +) {
if (chkoneobjs[j].checked = = False) {
Change the selected state of the Select box to False
chkallobj.checked = false;
Return
}
}
4.3 If the code can be executed here, the Select All is selected
chkallobj.checked = this.checked;

}
}

Iii. issues to be noted in the deletion

JS in the deletion when the parent element is called to delete its child elements, for the above table we have its parent-child relationship from small to large:checkbox->td->tr->tbody->table

1. Note: The parent element of TR is tbody instead of table, which may be considered by many to be the parent element of the TR, but I have looked up some information, some of which are not very specific to this definition, there are browser compatibility issues, etc. So there's more than one way to delete, but we can use the generic code tr.parentNode.removeChild (TR) to delete it.