Скрыть/показать элементы в javascript

<tr> 
<td>Name:</td> 
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td> 
</tr>

У меня есть это, какой javascript мне нужен, чтобы скрыть пробел и показать вход? Это должно быть сделано, нажав на эту кнопку редактирования:Скрыть/показать элементы в javascript

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i></a>

Я проверил другие вопросы на этом сайте для дублирования, но я попробовал много, и никто не ответил на мой вопрос!

источник

2016-12-03 hiba

Вход находится внутри пролета. Человек может буквально не скрывать этот диапазон и одновременно показывать ввод. – Lain

Я никогда не знал, что существует атрибут 'type =" '', доступный для привязанного тега – brk

Хорошо, если я поместил его снаружи, как я могу его просмотреть позже? @Lain – hiba

<html> 
    <head> 
     <script> 
      function showMe(){ 
       document.querySelector('#change').style.display = ''; //Show the input 
       document.querySelector('#keep').style.display = 'none' //Hide the span 
      } 
     </script> 
    </head> 

    <body> 
     <tr> 
      <td>Name:</td> 
      <td> 
       <span id = 'keep'>Username</span> 
       <input id = 'change' value= 'Name' style= 'display:none;'> 
      </td> 
     </tr> 
     <a href = '#' data-original-title = 'Edit this user' data-toggle = 'tooltip' type = 'button' class='btn btn-sm btn-warning' onclick = 'showMe()'><i class = 'glyphicon glyphicon-edit'>click me</i></a> 
    </body> 
</html>

источник

2016-12-03 16:08:49 Lain

Есть ли способ, которым я мог бы сохранить то, что редактирует после редактирования? Например, если я обновляю страницу, редактирование остается, когда они его редактируют? – hiba

Как и при нажатии этой кнопки сохранения, это сохраняет изменения? – hiba

Ehm yes, с localStorage, но мужчина должен создать для этого еще один вопрос. – Lain

Используйте этот простой код

первая добавить библиотека

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

ваш HTML код

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i>edit</a> 

<span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></span>

и использовать скрипт

<script> 
$(document).ready(function(){ 
    $("a").click(function(){ 
     $(" #change").toggle(); 
     $("#keep").hide(); 
    }); 
}); 
</script>

источник

2016-12-03 16:24:12

Reclicking даст странное поведение с одним переключателем и одним статическим шкуром. – Lain

Скрыть/показать элементы в javascript

ответ

Смежные вопросы