Home > Developer > JavaScript
Two: Table Case 1
<!doctype html>
<meta charset= "Utf-8" >
<script type= "Text/javascript" >
function Test () {
var Mytable=document.getelementbyid ("Mytab");
Window.alert (mytable.rows[2].cells[2]. InnerText);
}
function Addhero () {
var Mytable=document.getelementbyid ("Mytab");
var tablerow=mytable.insertrow (3);
var Tablecell=tablerow.insertcell (0);
Tablecell.innerhtml= "3";
var Tablecell1=tablerow.insertcell (1);
Tablecell1.innerhtml= "Wu use";
var Tablecell2=tablerow.insertcell (2);
Tablecell2.innerhtml= "mastermind";
}
function Deletehero () {
var Mytable=document.getelementbyid ("Mytab");
Mytable.deleterow (3);
}
function Updatehero () {
var Mytable=document.getelementbyid ("Mytab");
Mytable.rows[1].cells[2].innerhtml= "Black Three Lang";
}
</script>
<body>
<table id= "Mytab" border= "1px" >
<tr><td> rankings </td><td> names </td><td> nicknames </td></tr>
<tr><td>1</td><td> Song Jiang </td><td> timely rain </td></tr>
<tr><td>2</td><td> Lu Junyi </td><td> Jade Kylin </td></tr>
</table>
<input type= "button" onclick= "Test ()" value= "tesing"/>
<input type= "button" onclick= "Addhero ()" value= "Add"/>
<input type= "button" onclick= "Deletehero ()" value= "Delete"/>
<input type= "button" onclick= "Updatehero ()" value= "Modify"/>
</body>
Three: Modify the above case
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<script type= "Text/javascript" >
function Addhero () {
Get the user's input information
var No=document.getelementbyid (' No '). Value;
var Heroname=document.getelementbyid (' Heroname '). Value;
var Nickname=document.getelementbyid (' nickname '). Value;
var Mytab=document.getelementbyid (' Mytab ');
First judge, then add
for (Var i=0;i<mytab.rows.length;i++) {
if (Mytab.rows[i].cells[0].innerhtml==no) {
Window.alert ("duplicate numbering");
return false;
}
When traversing, find a way to determine the new hero, the proper location.
}
Add a row
Get Table Object
var tablerow=mytab.insertrow (mytab.rows.length);
Tablerow.insertcell (0). Innerhtml=no;
Tablerow.insertcell (1). Innerhtml=heroname;
Tablerow.insertcell (2). Innerhtml=nickname;
Tablerow.insertcell (3). innerhtml= "<a href= ' # ' onclick= ' abc ('" +no+ "') ' > Delete user </a>"
}
</script>
<body>
<table id= "Mytab" border= "1px" >
<tr><td> rankings </td><td> names </td><td> nicknames </td><td> Delete </td></tr >
</table>
Ranked <input type= "text" id= "no" name= "no"/><br/>
Name <input type= "text" id= "Heroname" name= "Heroname"/><br/>
Nickname <input type= "text" id= "nickname" Name= "nickname"/><br/>
<input type= "button" onclick= "Addhero ()" value= "Add"/>
</body>
Copyright Notice: Bo Master original articles, reproduced please indicate the source. Http://blog.csdn.net/dzy21
JavaScript DOM Programming (7): Common Objects 6
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
