Html <select> 想要默认隐藏并启用按钮操作
<select>我尝试默认隐藏，当我点击Edit按钮时我想显示它。但它没有按预期工作。
请在下面找到我的代码。
<!DOCTYPE html>
<html>
<head>
<script>
function update_country() {
if(document.getElementById("Editbtn").value == 'Edit'){
document.getElementById("country").style.display = 'none';
document.getElementById("Editbtn").value = "Update";
document.getElementById("countries").style.visible = 'true';
}
}
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td id="country">Germany</td>
<td id="countryOption" visible =false>
<select name="countries" id="countries" >
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
</select>
<input id="Editbtn" type="button" value="Edit" onclick="update_country()">
</td>
</tr>
</table>
</body>
</html>
Am trying to modify `Country` column by click on the `edit` button. once i clicked on edit button existing `<td>` tag should be hidden and `select>` tag should be visible to select other country and update the column by clicking on the `udpate` button
SMILET1回答
-
慕的地10843
这真的很简单，只需style='display:none'在 select 上添加内联并使用 js 进行更改，例如：<!DOCTYPE html><html><head><script> function update_country() { if(document.getElementById("Editbtn").value == 'Edit'){ document.getElementById("country").style.display = 'none'; document.getElementById("Editbtn").value = "Update"; document.getElementById("countries").style.display = 'inline-block'; } }</script><style>table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}tr:nth-child(even) { background-color: #dddddd;}</style></head><body><h2>HTML Table</h2><table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td id="country">Germany</td> <td id="countryOption" visible =false> <select name="countries" id="countries" style="display:none;"> <option value="Germany">Germany</option> <option value="India">India</option> <option value="France">France</option> <option value="Italy">Italy</option> </select> <input id="Editbtn" type="button" value="Edit" onclick="update_country()"> </td> </tr> </table></body></html>评论后编辑：更改block为inline-block将更新按钮放在下拉元素的右侧。
随时随地看视频慕课网APP
相关分类
JavaScript