HTML 作业

来源：互联网发布：大数据怎么快速学编辑：程序博客网时间：2024/06/05 02:52

前言
本作业为当堂作业，时间为30分钟。

一、题目要求

Buttons, ”add user”, ”edit” and “logout” are links, their url can be
empty.
Inputs, “Search type”, “search condition” and button “search” are
within a form. “search type” is a select with two options: user name
and user type.
“delete” is a link, when it is clicked, a confirm window will be
popped up.

效果如下图所示

这里写图片描述

二、实践
我编写了两个文件，F_excise.html 和 my.js

干货呈上：
F_excise.html

<!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=gb2312" /><script language="JavaScript" type="text/javascript" src="my.js"></script><link href="css1.css" rel="stylesheet" type="text/css" /><title>无标题文档</title></head><body><p>  <label>system admin->user management ->user list <span style="float:right"><a href="">logout</a></span></label></p><hr /><form id="form1" name="form1" method="post" action="">  <label>please select search type:  <select>    <option value ="1">user name</option>    <option value ="2">user type</option>  </select>  </label>  <label>search condition:  <input name="condition" type="text" />  </label>  <label>  <input type="submit" name="Submit" value="search" onclick=""/>  </label></form><p> <span><pre>user list:              <input name="adduser" type="button" value="add user"  onclick=""/></pre></span><table border="1" width="100%">  <tr bgcolor="#FF9900">    <th>user name</th>    <th>real name</th>    <th>sex</th>    <th>user type</th>    <th>edit</th>    <th>delete</th>  </tr>  <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr>   <tr>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center">row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td align="center"><input name="edit1" type="button" value="edit" /></td>    <td align="center"><a href="#" onclick="check(this.form)">delete</a></td>  </tr></table></html>

my.js

// JavaScript Document function check (form) {     var r=confirm("this user will be deleted,Are you sure?") ;     if (r==true)     {      alert("You pressed OK!");     }     else     {      alert("You pressed Cancel!");     } }

三、效果如下

这里写图片描述

0 0