Home > Developer > JavaScript
JavaScript adds or removes table table row code instances:
Tables are commonly used elements, although in the layout has been rarely used, has been basically replaced by the Div CSS, but in the organization of tabular data is still a great advantage, more than the use of Div css to come convenient, add or delete a row is also the most common operation of the TR, Here's a quick example of how you can achieve this with code examples.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><Scripttype= "Text/javascript"> functionAdd () { for(varI=0; I<Thetable.rows.length;i++) { varEachrow=Thetable.rows[i]; if(eachrow.cells[0].innerhtml==num.value) {alert ("number already exists! "); return ; } } varNewtablerow=Thetable.insertrow (thetable.rows.length); Newtablerow.insertcell (0). InnerHTML=Num.value; Newtablerow.insertcell (1). InnerHTML=Course.value; Newtablerow.insertcell (2). InnerHTML=Anthor.value;}functiondel () {Thetable.deleterow (thetable.rows.length-1);} Window.onload=function(){ varOadd=document.getElementById ("Add"); varOdel=document.getElementById ("del"); Oadd.onclick=function() {Add ()} Odel.onclick=function() {del ()}}</Script></Head><Body><TableID= "Thetable"Border= "1"> <TR> <TD>Serial number</TD> <TD>Tutorial</TD> <TD>Author</TD> </TR> <TR> <TD>1</TD> <TD>JavaScript tutorials</TD> <TD>Antzone</TD> </TR> <TR> <TD>2</TD> <TD>div CSS Tutorials</TD> <TD>Ant Tribe</TD> </TR></Table><ul> <Li>Serial number:<inputID= "num"type= "text"value=""></Li> <Li>Tutorial:<inputID= "Course"type= "text"value=""></Li> <Li>Author:<inputID= "Anthor"type= "text"value=""></Li> <Li> <inputtype= "button"value= "Add"ID= "Add" /> <inputtype= "button"value= "Delete last line"ID= "Del"/> </Li></ul></Body></HTML>
related reading:
1.rows collection can be found in the chapter.
chapter.
js use of innerHTML properties A chapter.
4.insertrow () function can refer to js InsertRow () Function usage provides a brief introduction to the chapter.
5.insertcell () function can refer to js InsertCell ( The function usage is a brief introduction to the chapter.
6.deleterow () function can refer to js deleterow () Function usage provides a brief introduction to the chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11878
For more information, refer to: http://www.softwhy.com/javascript/
JavaScript adds or removes table table row code instances
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
