1、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function deleteRow(link){
var b = confirm("确定删除?")
if(!b)
return;
var table = document.getElementById("heroTable");
var td = link.parentNode;
var tr = td.parentNode;
var index=tr.rowIndex;
table.deleteRow(index);
}
</script>
<table width="100%" border = "1" cellspacing="0" id="heroTable">
<tr >
<td width="50%">英雄名称</td>
<td>
操作
</td>
</tr>
<tr >
<td>盖伦</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>提莫</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>祈求者</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
</table>
</body>
</html>
2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function deleteRow(link){
var b = confirm("确定删除?")
if(!b)
return;
var table = document.getElementById("heroTable");
var td = link.parentNode;
var tr = td.parentNode;
var index=tr.rowIndex;
table.deleteRow(index);
}
</script>
<table width="100%" border = "1" cellspacing="0" id="heroTable">
<tr >
<td width="50%">英雄名称</td>
<td>
操作
</td>
</tr>
<tr >
<td>盖伦</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>提莫</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
<tr >
<td>祈求者</td>
<td>
<a href="#" onclick="deleteRow(this)">删除</a>
</td>
</tr>
</table>
</body>
</html>
3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号:<input id="name" type="text" name="name"> <br/>
密码:<input id="password" type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
var password = document.getElementById("password");
if(password.value.length==0){
alert("密码不能为空");
return false;
}
return true;
}
</script>
</body>
</html>
4、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
return true;
}
</script>
</body>
</html>
5、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
年龄:<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(age.value.length==0){
alert("年龄不能为空");
return false;
}
if(isNaN(age.value)){
alert("年龄必须是数字");
return false;
}
return true;
}
</script>
</body>
</html>
6、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
年龄:<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(parseInt(age.value)!=age.value){
alert("年龄必须是整数");
return false;
}
return true;
}
</script>
</body>
</html>
7、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
年龄:<input id="age" type="text" name="age">
<br><br>
EMail:<input id="email" type="text" name="email">
<br><br>
<input type="submit" value="注册">
<br>
</form>
<script>
function register(){
var name = document.getElementById("name");
if(name.value.length<3){
alert("用户名至少需要3位长度");
return false;
}
var age = document.getElementById("age");
if(isNaN(age.value)){
alert("年龄必须是数字");
return false;
}
var email = document.getElementById("email");
if(0==email.value.length){
alert("email不能为空");
return false;
}
var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
if (!Regex.test(email.value)){
alert("email格式不正确");
return false;
}
return true;
}
</script>
</body>
</html>
8、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
</body>
</html>
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr.odd{
background-color:#f8f8f8;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<div id ="d">
</div>
<script>
function createTD(text){
var td=document.createElement("td");
var text= document.createTextNode(text);
td.appendChild(text);
return td;
}
function createTR(texts){
var tr=document.createElement("tr");
for(var i=0;i<texts.length;i++){
var td = createTD(texts[i]);
tr.appendChild(td);
}
return tr;
}
function createTable(rows){
var table=document.createElement("table");
for(var i=0;i<rows.length;i++){
var tr= createTR(rows[i]);
table.appendChild(tr);
}
return table;
}
var row0= new Array("id","名称","血量","伤害");
var row1= new Array("1","gareen","340","58");
var row2= new Array("2","teemo","320","76");
var row3= new Array("3","annie","380","38");
var row4= new Array("4","deadbrother","400","90");
var rows=new Array(row0,row1,row2,row3,row4);
var div = document.getElementById("d");
var table=createTable(rows);
div.appendChild(table);
</script>
</body>
</html>