js如何判断<button></button>被选中
时间: 2023-08-17 11:18:29 浏览: 53
<button></button> 元素本身不具备选中状态,但是可以通过 JavaScript 监听其点击事件来实现类似选中的效果。例如:
```javascript
const button = document.querySelector('button');
button.addEventListener('click', function() {
button.classList.toggle('selected');
});
```
上述代码中,当用户点击 button 元素时,会给它添加或移除一个名为 "selected" 的 CSS 类,从而改变其样式,达到类似选中的效果。当然,具体实现方式还要根据具体的需求而定。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码
这段代码有一些问题,我来逐个指出并提供改进的方案:
1. 没有为表单元素设置name属性,导致表单提交时无法获取表单数据。因此,需要给每一个表单元素都设置name属性,例如:
```html
<input type="text" name="name">
```
2. 在性别选项中,使用了一个嵌套的form元素,这是不合法的HTML结构。应该将性别选项用label元素包裹,并为每个选项设置id属性,然后在label元素中使用for属性指向该选项的id,例如:
```html
<label for="male"><input type="radio" id="male" name="gender" value="男">男</label>
<label for="female"><input type="radio" id="female" name="gender" value="女">女</label>
```
3. select元素没有设置name属性,也无法选择默认选项。应该给select元素设置name属性,并在其中加入一个默认选项(可以使用disabled和selected属性来禁止该选项被选中),例如:
```html
<select name="language">
<option disabled selected>请选择语言</option>
<option>HTML</option>
<option>CSS</option>
<option>jquery</option>
<option>javascript</option>
<option>vue.js</option>
</select>
```
4. input元素的id属性应该为小写字母。
下面是改进后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>信息填写</title>
<script>
window.onload = function() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("提交成功");
};
}
</script>
</head>
<body>
<h1>信息填写</h1>
<form method="post">
姓名:<input type="text" name="name"><br>
<br>
账号:<input type="text" name="account"><br>
<br>
密码:<input type="password" name="password"><br>
<br>
<label for="male"><input type="radio" id="male" name="gender" value="男">男</label>
<label for="female"><input type="radio" id="female" name="gender" value="女">女</label><br>
<br>
<select name="language">
<option disabled selected>请选择语言</option>
<option>HTML</option>
<option>CSS</option>
<option>jquery</option>
<option>javascript</option>
<option>vue.js</option>
</select><br>
<br>
<input id="btn" type="button" value="提交">
</form>
</body>
</html>
```
<table id="entryDetail"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>宽度铺满滚动和选中删除
您可以使用以下代码来实现您的要求:
```html
<style>
#entryDetail {
width: 100%;
table-layout: fixed;
}
th, td {
padding: 10px;
text-align: center;
}
th:first-child, td:first-child {
width: 10%;
}
th:nth-child(2), td:nth-child(2) {
width: 15%;
}
th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) {
width: 12%;
}
th:nth-child(6), td:nth-child(6) {
width: 20%;
}
th:last-child, td:last-child {
width: 16%;
}
tbody tr:hover {
background-color: #f5f5f5;
}
</style>
<script>
function deleteTableRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
<table id="entryDetail">
<thead>
<tr>
<th>操作</th>
<th>提单号/运单号</th>
<th>一程日期</th>
<th>二程日期</th>
<th>预计到货日期</th>
<th>海船公司</th>
<th>放箱日期</th>
<th>放箱单上传</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td>
<td><input type="text" name="comment"></td>
<td><input type="date" name="date1"></td>
<td><input type="date" name="date2"></td>
<td><input type="date" name="date3"></td>
<td><input type="text" name="comment1"></td>
<td><input type="date" name="date4"></td>
<td><input type="file" name="attachment"></td>
</tr>
</tbody>
</table>
```
此代码将表格的宽度设置为100%,并使其表格布局固定。它还将表头和单元格的填充和文本对齐方式设置为居中。每个表头和单元格都有一个宽度百分比,以便在表格宽度变化时自适应。还添加了一个鼠标悬停样式以提高用户体验。在代码的底部,有一个JavaScript函数deleteTableRow(btn),它将从表格中删除所在行。