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

JavaScript how to achieve dynamic tables, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Realization of dynamic Table by JavaScript

(for the modified version, see the code at the bottom)

The basic effects are as follows

Click add, you can add the value in the input box to the table; click Delete to delete the content of this line.

The code is as follows: the first way (relatively simple, recommended) dynamic form 02 table {border: 1px solid; margin: auto; width: 500px;} td,th {text-align: center; border: 1px solid;} div {text-align: center Margin: 50px } Student information table id name gender operation 001 little swallow girl delete 003 Yongqi male delete / / use innerHTML to add button to bind event Var element = document.getElementById ("btn_add") Element.onclick=function () {/ / get the content in the text box var id = document.getElementById ("id"). Value; var name=document.getElementById ("name"). Value; var gender=document.getElementById ("gender"). Value; / / get table var table=document.getElementsByTagName ("table") [0] / / add a new line table [XSS _ clean] + = "" + "" + id+ "" + name+ "" + gender+ "" + "delete";} / / delete method function delTr (obj) {var table = obj [XSS _ clean] [xss_clean] [xss_clean]; var tr = obj [XSS _ clean] [xss_clean]; table.removeChild (tr) } dynamic form 02 table {border: 1px solid; margin: auto; width: 500px;} td,th {text-align: center; border: 1px solid;} div {text-align: center; margin: 50px } Student information table id name gender operation 001 little swallow girl delete 003 Yongqi male delete / / use innerHTML to add button to bind event Var element = document.getElementById ("btn_add") Element.onclick=function () {/ / get the content in the text box var id = document.getElementById ("id"). Value; var name=document.getElementById ("name"). Value; var gender=document.getElementById ("gender"). Value; / / get table var table=document.getElementsByTagName ("table") [0] / / add a new line table [XSS _ clean] + = "" + "" + id+ "" + name+ "" + gender+ "" + "delete";} / / delete method function delTr (obj) {var table = obj [XSS _ clean] [xss_clean] [xss_clean]; var tr = obj [XSS _ clean] [xss_clean]; table.removeChild (tr);}

Simple explanation

The deleted event is bound in the table table. Look!

Mode two

It only needs to be modified on the basis of the above

/ to add button binding event var element = document.getElementById ("btn_add"); element.onclick=function () {/ / get the contents of the text box var id = document.getElementById ("id") .value; var name=document.getElementById ("name") .value; var gender=document.getElementById ("gender") .value / / create a row table var td_id = document.createElement ("td"); var td_name = document.createElement ("td"); var td_gender = document.createElement ("td"); var td_a = document.createElement ("td"); var ele_a=document.createElement ("a"); var text_id = document.createTextNode (id) Td_id.appendChild (text_id); var name_id = document.createTextNode (name); td_name.appendChild (name_id); var gender_id = document.createTextNode (gender); td_gender.appendChild (gender_id); / / set the attribute value ele_a.setAttribute ("href", "_ javascript:void (0);") Ele_a.setAttribute ("onclick", "delTr (this);"); var text_a=document.createTextNode ("delete"); ele_a.appendChild (text_a); td_a.appendChild (ele_a); var tr = document.createElement ("tr"); / / add td to tr tr.appendChild (td_id) Tr.appendChild (td_name); tr.appendChild (td_gender); tr.appendChild (td_a); / / get table var table = document.getElementsByTagName ("table") [0]; table.appendChild (tr) } / / delete method function delTr (obj) {var table = obj [XSS _ clean] [xss_clean] [xss_clean]; var tr = obj [XSS _ clean] [xss_clean]; table.removeChild (tr);}

Simple explanation

Improved version

Also added some new features: mouse hover color change, select all, do not select all, reverse selection.

Effect: the box can be selected, all can be selected, none can be selected, and reverse selection can be made.

The code is as follows: dynamic table 02 table {border: 1px solid; margin: auto; width: 500px;} td,th {text-align: center; border: 1px solid;} div {text-align: center; margin: 50px } .out {background-color: white;} .over {background-color: pink } Student information form id name gender operation 001 Little Swallow Girl deletion 003 Yongqi male deletion / / use innerHTML to bind the add button event var element = document.getElementById ("btn_add") Element.onclick=function () {/ / get the content in the text box var id = document.getElementById ("id"). Value; var name=document.getElementById ("name"). Value; var gender=document.getElementById ("gender"). Value; / / get table var table=document.getElementsByTagName ("table") [0] / / add a new line table [XSS _ clean] + = "" + id+ "" + name+ "" + gender+ "" + "delete";} / / delete method function delTr (obj) {var table = obj [XSS _ clean] [xss_clean] [xss_clean]; var tr = obj [XSS _ clean] [xss_clean]; table.removeChild (tr) } / / add an event / / 1 to the previous one or not. Bind the event _ window.onload=function () {/ / bind the click event document.getElementById ("selectAll") to the all button after the page has loaded. Onclick=function () {/ / get all the checkbox var cbs = document.getElementsByName ("cb"); for (var iTuno

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.