| 商品名称 | 单价 | 数量 | 总价 | 操作 |
|---|---|---|---|---|
健身水杯 | 100 | <input type="number" value="1" min="1"> | 100 | <button class="btn btn-danger">删除</button> |
商品2 | 200 | <input type="number" value="1" min="1"> | 200 | <button class="btn btn-danger">删除</button> |
商品3 | 300 | <input type="number" value="1" min="1"> | 300 | <button class="btn btn-danger">删除</button> |
| 总价： | 600 | |||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body> 酒店管理系统
<main> 酒店客房管理
酒店管理系统
| ID | 类型 | 价格 | 编辑 |
|---|---|---|---|
| 1 | 单人房 | ¥200 | <button class="edit-btn">编辑</button> |
| 2 | 双人房 | ¥300 | <button class="edit-btn">编辑</button> |
| 3 | 豪华房 | ¥500 | <button class="edit-btn">编辑</button> |
添加客房
<form> <label for="room-id">ID：</label> <input type="number" id="room-id" required>
<label for="room-type">类型：</label> <input type="text" id="room-type" required>
<label for="room-price">价格：</label> <input type="number" id="room-price" required>
<button type="submit">添加</button> </form> 用以下表格，人工构建一个html文件，文件的body标签里只有一个table标签：
| 歌名 | 作者 | 时间 |
| 白月光与朱砂痣 | 大籽 | 2021 |
| 晴天 | 周杰伦 | 2003 |
| Love Story | Taylor Swift | 2009 |
| 梦幻丽莎发廊 | 五条人 | 2016 |
<!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++){ var cell = row.insertCell(i); cell.innerHTML = '<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </head> <body>
| 列1 | 列2 | 列3 | 列4 | 列5 |
|---|---|---|---|---|
| <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> |
改进这段代码让它有鼠标移入图片改变的效果<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body>
| 女靴 |  | 女包 |
| 雪地靴 | 男包 | |
| 冬裙 | 登山鞋 | |
| 呢大衣 | 皮带 | |
| 毛衣 | 围巾 | |
| 棉服 | 皮衣 | |
| 女裤 | 男毛衣 | |
| 羽绒服 | 男棉服 | |
| 牛仔裤 | 男靴 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <style> #bills{ width: 400px; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { 空缺处 }); </script> </head> <body>
| 编号 | 分类 | 名称 | 价格(元) |
|---|---|---|---|
| 01 | 食品 | 农夫山泉矿泉水 | 2.00 | </tr
| 02 | 日用品 | 洗发水 | 25.00 |
| 03 | 娱乐休闲 | 暑假旅游 | 5000.00 |
</form> 改为html语言
| 姓名： | <input type="text" name="personName" value="${sessionScope.updateById.personName}"> |
| 称呼： | <input type="text" name="personNickName" value="${sessionScope.updateById.personNickName}"> |
| 性别： | <input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">男<input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">女 |
| 类别： | <input type="text" name="kindId" value="${sessionScope.updateById.kindId}"> |
| 生日： | <input type="text" name="personBirthday" value="${sessionScope.updateById.personBirthday}"> |
| 电话： | <input type="text" name="personTelephone" value="${sessionScope.updateById.personTelephone}"> |
| QQ： | <input type="text" name="personQQ" value="${sessionScope.updateById.personQQ}"> |
| 邮箱： | <input type="text" name="personEmail" value="${sessionScope.updateById.personEmail}"> |
| 地址： | <input type="text" name="personAddress" value="${sessionScope.updateById.personAddress}"> |
| MSN： | <input type="text" name="personMSN" value="${sessionScope.updateById.personMSN}"> |
| 简介： | <textarea cols="10" rows="5" name="personInfo">${sessionScope.updateById.personInfo}</textarea> |
| <input type="submit" name="重填" value="重填"> | <input type="submit" name="提交" value="提交"> |
