Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2018, 18:26
Новичок на форуме
Отправить личное сообщение для Nastya19 Посмотреть профиль Найти все сообщения от Nastya19
 
Регистрация: 08.09.2018
Сообщений: 3

как изменять текст на кнопке по нажатию?
Здравствуйте, есть кнопка, которая по нажатию показывает скрытые строки таблицы и по повторному нажатию скрывает их. Как изменять текст на кнопке при выполнение этого?
<input class="btn button-show"  type="button" value="Развернуть"/>

<script>	
document.querySelector(".button-hide").onclick = function() {
  var elements = document.getElementsByClassName("table-success");
  for (var i = 0; i < elements.length; i++) {
  elements[i].classList.toggle("box");
  }
}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 15.09.2018, 19:04
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<input class="btn button-show"  type="button" value="Развернуть"/>
	<script>
		document.querySelector('.button-show').onclick = function(){
		 this.value = this.value == "Развернуть" ? "Свернуть" : "Развернуть";
		};
	</script>
Ответить с цитированием
  #3 (permalink)  
Старый 15.09.2018, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Nastya19,
es6
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .table-success {
      display: none;
  }
  .table-success.box{
      display: table-row;
  }
  .button-show:after{
      content: "Развернуть";
  }
  .button-show.box:after{
      content: "Свернуть";


  }
 .btn{
  transition: .5s;
  text-shadow: 0 -1px 1px #777;
  color: #fff;
  outline: none;
  border: 2px solid #F64C2B;
  border-radius: 5px;
  box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
  background-image: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
  padding: 2px 6px;
 }
 .btn.box {

}
</style>



</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr class="table-success">
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<span class="btn button-show" ></span>
<script>
document.querySelector(".button-show").onclick = function() {
  var elements = document.querySelectorAll(".table-success");
  [...elements,this].forEach(e => e.classList.toggle("box"))
  }
</script>


</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
2 блока "отрыть полностью" polepropilen Элементы интерфейса 7 22.06.2018 23:53
Вывести HTML-код как текст Dion Элементы интерфейса 2 28.09.2015 22:45
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
Прокрутка; Изменение координат картинки (Sandr) Общие вопросы Javascript 12 31.12.2011 04:34
На входе HTML получить на выходе просто текст, как? Dmitry Общие вопросы Javascript 2 25.08.2008 10:42