Форум

Nastya19 · #1 (**permalink**) 15.09.2018, 18:26

Здравствуйте, есть кнопка, которая по нажатию показывает скрытые строки таблицы и по повторному нажатию скрывает их. Как изменять текст на кнопке при выполнение этого?

<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>

j0hnik · #2 (**permalink**) 15.09.2018, 19:04

<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

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>

Форум

Справочник

Discord чат

Курсы javascript