表格的增删改查
这周，复习了JS的操作，并用更简捷的代码，实现了表格的增删改查！
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <script type="text/javascript"> | |
| var codtet=null; | |
| var usernametxt=null; | |
| var moneytxt=null; | |
| var datetxt=null; | |
| var showtr=null; | |
| var delbutton=null; | |
| window.onload=function() { | |
| codetxt =document.getElementById("code"); | |
| usernametxt = document.getElementById("username"); | |
| moneytxt =document.getElementById("money"); | |
| datetxt = document.getElementById("date"); | |
| delbutton=document.getElementById("delbutton") | |
| var trs= datetxt.getElementsByTagName("tr"); | |
| for(var i=0;i<trs.length;i++){ | |
| trs[i].onclick=function(){ //tr的每一项增加一个点击事件 | |
| trChangColor(this); | |
| } | |
| } | |
| } | |
| function trChangColor(teObj){ | |
| if(showtr!=null){ | |
| showtr.style.backgroundColor="white"; //定义一个样式为白色 | |
| } | |
| teObj.style.backgroundColor="red"; //点击的时候变成红色 | |
| showtr=teObj; //定义的样式等于点击过后的样式 | |
| delbutton.disabled=false; | |
| var tds=showtr.getElementsByTagName("td"); | |
| codetxt.value=tds[0].innerHTML; | |
| usernametxt.value=tds[1].innerHTML; | |
| moneytxt.value=tds[2].innerHTML; | |
| } | |
| function add(){ | |
| var newTr=document.createElement("tr"); //创建一个tr | |
| newTr.innerHTML="<td>"+codetxt.value+"</td><td>"+usernametxt.value+"</td><td>"+moneytxt.value+"</td>"; //tr的格式 | |
| datetxt.appendChild(newTr); //将这个创建的tr放到tbody里面 | |
| } | |
| function del(){ | |
| datetxt.removeChild(showtr); //删除点击的tr | |
| delbutton.disabled=true; | |
| } | |
| function update(){ | |
| showtr.innerHTML="<td>"+codetxt.value+"</td><td>"+usernametxt.value+"</td><td>"+moneytxt.value+"</td>"; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <table border="1" style="width: 200px ;float: left;text-align: center" > | |
| <thead > | |
| <tr ><td>工号</td><td>姓名</td><td>工资</td></tr> | |
| </thead> | |
| <tbody id="date"> | |
| <tr ><td>1</td><td>张三</td><td>2000</td></tr> | |
| <tr ><td>2</td><td>李四</td><td>3000</td></tr> | |
| <tr ><td>3</td><td>王五</td><td>4000</td></tr> | |
| <tr ><td>4</td><td>赵六</td><td>3700</td></tr> | |
| </tbody> | |
| </table> | |
| <div style="width: 300px;float: left;margin-left: 30px"> | |
| 工号：<input type="text" id="code"/><br/> | |
| 姓名：<input type="text" id="username"/><br/> | |
| 工资：<input type="text" id="money"/><br/> | |
| <input type="button" value="添加" onclick="add()"/> | |
| <input type="button" value="删除" onclick="del()" id="delbutton" disabled /> <!--禁用--> | |
| <input type="button" value="修改" onclick="update()" /> | |
| </div> | |
| </body> | |
| </html> |
实现的效果：
这周，还学习了数据库
创建表 CREATE TABLE <表名>;
删除表 DROP TABLE <表名>;
复制表 SELECT * INTO my_Friends FROM Friend ; //复制 Friend表的结构，创建一个新的my_Friends表
修改表 ALTER TABLE Friend ADD Address VARCHAR (50); //给Friend 添加一个新的Address列
创建索引 CREATE INDEX <索引名>ON<表名>(<列名一>);
删除索引 DROP INDEX Friend .phonNoIndex;
