Примеры JavaScript

Убрать не нужную строку

<table cellspacing="0" class="table">
  <tr>
    <th>Фрукты</th>
    <th>Овощи</th>
    <th>Ягоды</th>
  </tr>
  <tr>
    <td>Яблоко</td>
    <td>Помидор</td>
    <td>Арбуз</td>
  </tr>
  <tr>
    <td>Апельсин</td>
    <td>Картофель</td>
    <td>Вишня</td>
  </tr>
</table>

<p><button>Убрать строку 1</button></p>

<p><button>Скрыть строку 1</button></p>

<p><button>Вернуть</button></p>

<script>
var btns = document.getElementsByTagName('button'),
    rows = document.getElementsByTagName('tr');

btns[0].addEventListener('click', function () {
  rows[1].className = 'vc';
}, false);

btns[1].addEventListener('click', function () {
  rows[1].className = 'vh';
}, false);

btns[2].addEventListener('click', function () {
  rows[1].className = '';
}, false);
</script>

После нажатия изменить фон

<div class="toggle-img" id="box"></div>

<p><button id="b" data-bg="true">Изменить фон</button></p>

<script>
var i = document.getElementById('box'),
    b = document.getElementById('b');

b.onclick = function () {
  if (this.getAttribute('data-bg') === 'true') {
    box.style.background = 'aquamarine url(images/200.jpg) no-repeat scroll center center';
    this.setAttribute('data-bg', 'false');
  } else {
    box.style.background = 'aquamarine url(images/200.jpg) no-repeat scroll center center / 50% content-box content-box';
    this.setAttribute('data-bg', 'true');
  }
};</script>

Изменить размер блока

demo

Заменить текст кнопки

<button type="button" id="button">Первый</button>
function modifyText() {
  var b = document.getElementById("button");
  if (b.firstChild.nodeValue == "Второй") {
      b.firstChild.nodeValue = "Первый";
  } else {
      b.firstChild.nodeValue = "Второй";
  }
}

var el = document.getElementById("button");
el.addEventListener("click", modifyText, false);

Добавить и убрать высоту для блока

<button>Клац</button>
<div style="background: red; height: 0px;"></div>

<script>
var e = document.querySelector('button');
var p = document.querySelector('div');

e.addEventListener("click", function() {		
p.style.height = (p.style.height == "185px") ? '0px' : '185px';
});    
</script>