亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Html <select> 想要默認隱藏并啟用按鈕操作

Html <select> 想要默認隱藏并啟用按鈕操作

SMILET 2023-03-10 14:51:02
<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
查看完整描述

1 回答

?
慕的地10843

TA貢獻1785條經驗 獲得超8個贊

這真的很簡單,只需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>

評論后編輯:

更改blockinline-block將更新按鈕放在下拉元素的右側。


查看完整回答
反對 回復 2023-03-10
  • 1 回答
  • 0 關注
  • 228 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號