You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.1 KiB
122 lines
3.1 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<link href="css.css">
|
|
<title>无标题文档</title>
|
|
|
|
<script type="text/javascript">
|
|
window.onload = function(){
|
|
|
|
|
|
//此功能实现增加数据表，删除数据表
|
|
function Del(){
|
|
var tr = this.parentNode.parentNode;
|
|
if(confirm("是否删除"+tr.getElementsByTagName("td")[0].innerHTML+"?")){
|
|
tr.parentNode.removeChild(tr);
|
|
}
|
|
return false;
|
|
};
|
|
var x = document.getElementsByTagName("a");
|
|
for(var i=0;i<x.length;i++){
|
|
x[i].onclick = Del;
|
|
}
|
|
|
|
var y = document.getElementsByTagName("button")[0];
|
|
y.onclick = function(){
|
|
var name = document.getElementsByName("name")[0].value;//获取表单中的名字text
|
|
var age = document.getElementsByName("age")[0].value;//获取表单中的年龄text
|
|
var ta1 = document.getElementById("ta1");
|
|
var tbody = ta1.getElementsByTagName("tbody")[0];
|
|
var tr = document.createElement("tr");
|
|
tr.innerHTML ="<td>"+name+"</td>"+
|
|
"<td>"+age+"</td>"+
|
|
"<td><a href='javascriptl:;'>delete</td>";
|
|
tbody.appendChild(tr);
|
|
tr.getElementsByTagName("a")[0].onclick = Del;
|
|
};
|
|
|
|
|
|
//改变css样式
|
|
var box1 = document.getElementById("box1");
|
|
var sub2 = document.getElementsByTagName("button")[1];
|
|
sub2.onclick = function(){
|
|
var x = Change(box1,"width");
|
|
alert(x);
|
|
};
|
|
function Change(obj,name){
|
|
return window.getComputedStyle?window.getComputedStyle(obj,null)[name]:obj. getCurrentStyle[name];
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
#box1{
|
|
background-color:#09F;
|
|
width:450px;
|
|
margin:45px auto auto auto;}
|
|
|
|
#ta1{
|
|
width:300px;
|
|
margin:50px auto auto auto;
|
|
text-align:center;
|
|
border:dotted}
|
|
#ta2{
|
|
width:300px;
|
|
margin:50px auto auto auto;
|
|
text-align:center;
|
|
background-color:#0FF;}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="box1">
|
|
<table id ="ta1">
|
|
<tr>
|
|
<td>名字</td>
|
|
<td>年龄</td>
|
|
<td>删除</td>
|
|
</tr>
|
|
<tr>
|
|
<td value="13">li zhang</td>
|
|
<td>19</td>
|
|
<td><a href="javascript:;">delete</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>hu chen</td>
|
|
<td>18</td>
|
|
<td><a href="javascropt:;">delete</a></td>
|
|
</tr>
|
|
</table>
|
|
<table id="ta2">
|
|
<tr>
|
|
<td><input type="text" name="name" value="name" /></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td><input type="text" name="age" value="age" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button value="submit">submit</button>
|
|
<button value="submit2">submit2</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|