HTML 作业

最新推荐文章于 2025-11-14 05:53:13 发布

原创最新推荐文章于 2025-11-14 05:53:13 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #js

J2EE 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个用户管理界面的设计与实现过程，包括HTML结构布局、JavaScript交互逻辑等。通过实例展示了如何创建用户列表、搜索功能及删除确认对话框。

前言
本作业为当堂作业，时间为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!");
     }
 }

三、效果如下

这里写图片描述