<table> <form action="updatePerson.do?personId=${sessionScope.updateById.personId}" method="post"> <tr> <td>姓名:</td> <td><input type="text" name="personName" value="${sessionScope.updateById.personName}"></td> </tr> <tr> <td>称呼:</td> <td> <input type="text" name="personNickName" value="${sessionScope.updateById.personNickName}"></td> </tr> <tr> <td>性别:</td> <td><input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">男<input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">女</td> </tr> <tr> <td> 类别:</td> <td><input type="text" name="kindId" value="${sessionScope.updateById.kindId}"></td> </tr> <tr> <td>生日:</td> <td><input type="text" name="personBirthday" value="${sessionScope.updateById.personBirthday}"></td> </tr> <tr> <td>电话:</td> <td><input type="text" name="personTelephone" value="${sessionScope.updateById.personTelephone}"></td> </tr> <tr> <td>QQ:</td> <td> <input type="text" name="personQQ" value="${sessionScope.updateById.personQQ}"></td> </tr> <tr> <td> 邮箱:</td> <td><input type="text" name="personEmail" value="${sessionScope.updateById.personEmail}"></td> </tr> <tr> <td> 地址:</td> <td> <input type="text" name="personAddress" value="${sessionScope.updateById.personAddress}"></td> </tr> <tr> <td> MSN:</td> <td><input type="text" name="personMSN" value="${sessionScope.updateById.personMSN}"></td> </tr> <tr> <td> 简介:</td> <td><textarea cols="10" rows="5" name="personInfo">${sessionScope.updateById.personInfo}</textarea></td> </tr> <tr> <td><input type="submit" name="重填" value="重填"></td> <td><input type="submit" name="提交" value="提交"></td> </tr> </form> </table>给这段代码设置css样式,和js特效
时间: 2023-08-14 15:14:40 浏览: 101
好的,以下是一个简单的 CSS 样式和 JS 特效的代码示例:
CSS 代码:
```css
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background-color: #4CAF50;
color: white;
}
input[type=text], textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
resize: none;
}
input[type=radio] {
margin-right: 10px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
input[type=submit]:hover {
background-color: #45a049;
}
input[type=submit][name=重填] {
background-color: #f44336;
}
input[type=submit][name=重填]:hover {
background-color: #f44336;
}
```
JavaScript 代码:
```javascript
// 增加输入框的自动扩展功能
document.querySelectorAll('textarea').forEach(function(element) {
element.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}, false);
});
// 提交表单前进行数据验证
document.querySelector('form').addEventListener('submit', function(event) {
var name = document.querySelector('input[name=personName]').value;
var nickname = document.querySelector('input[name=personNickName]').value;
var sex = document.querySelector('input[name=personSex]:checked');
var kind = document.querySelector('input[name=kindId]').value;
var birthday = document.querySelector('input[name=personBirthday]').value;
var telephone = document.querySelector('input[name=personTelephone]').value;
var qq = document.querySelector('input[name=personQQ]').value;
var email = document.querySelector('input[name=personEmail]').value;
var address = document.querySelector('input[name=personAddress]').value;
var msn = document.querySelector('input[name=personMSN]').value;
var info = document.querySelector('textarea[name=personInfo]').value;
if (name.length === 0 || nickname.length === 0 || sex === null || kind.length === 0 || birthday.length === 0 || telephone.length === 0 || qq.length === 0 || email.length === 0 || address.length === 0 || msn.length === 0 || info.length === 0) {
event.preventDefault();
alert('请填写完整信息!');
}
}, false);
```
这个代码会对表格中的输入框进行样式美化,并增加了一个自动扩展输入框的功能。同时,还添加了一个表单提交前的数据验证功能,如果有任何一项数据没有填写,会弹窗提示用户进行完整填写。
注意:这段代码并不能直接运行,需要在 HTML 文件中引入 CSS 和 JS 文件,并将 HTML 代码放到相应位置。
阅读全文