这篇博客主要介绍了HTML、CSS和JavaScript的实践应用，包括三线表的创建、名称长度的校验、全选功能的实现、数组的使用、对象的定义与调用、省市联动效果以及表格行元素的增删改操作。
目录
三线表：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset=""utf-8 /> <title>demo</title> <style type="text/css"> table{ border:0px; } table td { border:0px; } table tr:hover { background-color:#9fcdff; } .td1 { border-top:1px #000000 solid; border-bottom:1px #000000 solid; } .td2 { border-bottom:1px #000000 solid } </style> </head> <body> <table width="200" border="1" align="center" cellspacing="0" cellpadding="0"> <tr> <td class="td1">1</td> <td class="td1">1</td> <td class="td1">1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td class="td2">4</td> <td class="td2">4</td> <td class="td2">4</td> </tr> </table> <body> <html> |
校验名称长度：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo2</title> <script src = "demo2.js" type="text/javaScript"></script> </head> <body> <input type="text" name="name" id="name" οnblur="checkName()"><span name="msg_name" id="msg_name">输入6~10位字符</span></input> </body> </html> |
全选操作：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo3</title> <script src = "demo2.js" type="text/javaScript"></script> </head> <body> <input type = "checkbox" name="all" id="all" οnclick="changeAll()" />全选 <input type = "checkbox" name="item" id="item1" οnclick="changeItem()" />item <input type = "checkbox" name="item" id="item2" οnclick="changeItem()" />item <input type = "checkbox" name="item" id="item3" οnclick="changeItem()" />item </body> </html> |
最低0.47元/天 解锁文章
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
