Блог

Главная - Вопросы по программированию - Html хотите скрыть по умолчанию и включить при нажатии кнопки

Html хотите скрыть по умолчанию и включить при нажатии кнопки

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь скрыть <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:

Это действительно просто, просто добавьте встроенную style='display:none' строку при выборе и измените с помощью 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 для приведения кнопки обновления в правой части выпадающего элемента.

Комментарии:

1. Спасибо, что он работает хорошо., как мы можем перенести Update кнопку в правую часть dropdown элемента.