Shulou(Shulou.com)06/03 Report--

This article focuses on "how to use js to add and delete tables", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to add and delete tables with js"!

Effect:

1. Click the add button to add a row to the table to change the check box in front of all to false.

1.1. The current new check box plus click event

2. Click the delete button to get the selected row in the table body, delete the entire tr, and change the check box in front of all to false.

What is obtained is the status of the checkbox in the first td. Checked is the true layer 2 parent and son.

3. Click the check box in front of the all button if each of the following check boxes is selected, if not selected, each of the following check boxes is not selected

4. Click the check box in each table body. If all check boxes are selected, the select all button is selected. If one is not selected, the select all button is unchecked.

Css:

.head {width: 500px; padding: 8px; margin: 20px auto; box-sizing: border-box; border: 1px solid # eee;} input {margin-left: 3px; outline: none;} button {float: right } table {width: 500px; border: 1px solid # 000; margin: 0 auto; border-collapse: collapse;} tr, td, th {border: 1px solid # 000;} tr td:nth-child (1) {text-align: center Foot {width: 500px; margin: 8px auto; padding: 8px; box-sizing: border-box;} .foot button {float: right } td:nth-child (2), td:nth-child (3), td:nth-child (4) {width: 20%;}

Html:

Please enter a name:

Please enter gender: male and female

Please enter age: add to the form all selected names, sex, age, Zhang San female 88 Li Si male 18 Wang Wu female 12 delete the selected line

_ javascript:

/ / event trilogy / / 1. Get element button table tBody check box inp var btns = document.querySelectorAll ('button'); var table = document.querySelector (' table'); var inps = document.querySelectorAll ('input'); var all = table.tHead.querySelector (' input'); var cks = table.tBodies [0] .getElementsByTagName ('input'); var cks1 = table.tBodies [0] .querySelectorAll (' input') / console.log (btns, table, inps, cks); / console.log (cks, all); console.log (cks, cks1); / / 2. Click the add button btns [0] .onclick = function () {/ / 3. Add a line to table: var tr = document.createElement ('tr'); / / 4. Add tr to tbody table.tBodies [0] .appendChild (tr); / / 5. Create td var inp = document.createElement ('td'); inp [XSS _ clean] =''; tr.appendChild (inp); var user = document.createElement ('td'); user [XSS _ clean] = inps [0] .value; tr.appendChild (user); var sex = document.createElement (' td') Sexes [XSS _ clean] = inps [1]. 'male': 'female'; tr.appendChild (sex); var age = document.createElement ('td'); age [XSS _ clean] = inps [3] .value; tr.appendChild (age); / / 6. Select all the previous check boxes to change to false all.checked = false; / / the currently added check box plus the click event var bck = tr.querySelector ('input'); console.log (bck); bck.onclick = function () {auto ();}} / / 7. Click the delete button to delete the selected line btns [1] .onclick = function () {/ / 8. Get the selected row / / console.log (cks, cks1) in the table body; / / 9. Determine whether the check box is selected for (var I = 0; I < cks.length; iTunes +) {console.log (cks); if (CKS [I] .check) {/ / console.log (CKS [I] [xss_clean] [xss_clean]); / / console.log (cks); / / 10. Delete the entire line cks [I] [xss_clean] [xss_clean] .remove (); iMeltel;}} / / 11. Change the previous check box to false all.checked = false;} / / Click the check box in front of the all button if each of the following check boxes is selected, if not checked, each of the following check boxes is not selected / / 12. Click all all.onclick = function () {console.log (all.checked); / / 13. Each for (var I = 0; I < cks.length;i++) {cks [I] .requests = all.checked }} / / Click the check box in each table body. If all check boxes are selected, the select all button is selected. If one is not selected, the select all button is unchecked for (var j = 0; j < cks.length). Var +) {/ / Click CKS [j] .onclick = function () {/ / all / for (CKS I = 0; I < cks.length; iClick +) {/ / console.log (CKS [I] .click) / if one is not selected, the select all button is unchecked / / if (CKS [I]. Select = = false) {/ the select all button is unchecked / / all.checked = false / end the entire function / / return; / /} / all are selected / / all.checked = true; auto () }} function auto () {/ / all for (var I = 0; I < cks.length; iTunes +) {console.log (CKS [I] .cards) / / if one is not selected, the Select all button is unchecked if (CKS [I]. Select = = false) {/ / Select all button is not selected all.checked = false / / end the entire function return;} / / all are selected all.checked = true;}

Effect:

At this point, I believe you have a deeper understanding of "how to add and delete tables with js". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.