先简单讲一下需求:页面中会列出多行个人信息记录,为方便查找,在顶层增加一个搜索栏,可根据用户姓名查找记录。
如果只想查看代码,可跳过分析过程,文章底部提供了完整的代码。
以下是我的编写过程:
rush:xhtml;">
为了方便调试静态页面,可以先将web项目启动,然后在浏览器中查看源代码,复制form中的代码,另存为一个本地html文件。
chrome操作如下:
为了看起来舒服一些,简单的增加一些表格样式:
rush:xhtml;">
姓名:
Box" name="userId" value="05cacc57-cb8a-4ba7-a928-1d49a0f0cfc0">
Box" name="userId" value="111111111111111111111111111111111111">
默认Box" name="userId" value="403b76a5-22f9-470c-8d9c-d0becca9ff3d">
管理员5Box" name="userId" value="49adbf34-d9bc-4f5c-b440-cad07913afa1">
Box" name="userId" value="52dbff4d-976b-4e92-8b83-25b1fd4fe8c4">
Box" name="userId" value="6148129f-6682-41a5-b097-28d02e804a69">
Box" name="userId" value="7bfbbf24-7f4a-4733-90d2-58b4611c3916">
Box" name="userId" value="8e2e427c-edf7-40e3-bcc1-18430549ca80">
Box" name="userId" value="91072894-0c0c-43f8-b294-bbe1990531df">
Box" name="userId" value="9199bd7b-0861-4bcc-9c8c-7c8c938d41c0">
Box" name="userId" value="9200b2d4-79f3-4b71-a023-d67618ff0eba">
Box" name="userId" value="a14cea40-02c3-479c-9ef0-d493d013c409">
Box" name="userId" value="b903ea21-95d6-4390-9832-f7de83a8b6ba">
Box" name="userId" value="badf02fe-e494-479c-922c-dfa5967d21fb">
Box" name="userId" value="cc100fe0-65c9-41a2-95e2-612f4d18f6fd">
Box" name="userId" value="cd2e596b-5b45-4f08-a3c2-d95f7397003a">
Box" name="userId" value="d00d125f-95a6-4fb4-b209-a283773ddfd6">
管理员5Box" name="userId" value="fe76629d-d24d-4296-be05-bf2897f67066">