1. Получи 30.000 рублей. Для получения денег необходимо принять участие в конкурсе авторов codeby. С условиями и призами можно ознакомиться на этой странице ...

    Внимание! Регистрация авторов на конкурс закрыта.

    Скрыть объявление
  2. Требуются разработчики и тестеры для проекта codebyOS. Требования для участия в проекте: Знание принципов работы ОС на базе Linux; Знание Bash; Крайне желательное знание CPP, Python, Lua; Навыки системного администрирования. Подробнее ...

    Скрыть объявление

Скрытие И Отображение Таблицы

Тема в разделе "Web - программирование", создана пользователем bsi, 21 окт 2014.

  1. bsi

    bsi New Member

    Репутация:
    0
    Регистрация:
    1 июн 2013
    Сообщения:
    3
    Симпатии:
    0
    Прошу помочь модифицировать представленный код так, чтобы при выборе в выпадающем списке "Без ограничений" таблица (с заголовком) была скрыта, при других вариантах вновь появлялась на экране и добавлялось бы указанное к-во строк. Всем ответившим, спасибо.
    Код:
    <body>
    <select onchange="change(this.value);">
    <option value="0">Без ограничений</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="10">10</option>
    </select>
    
    <table border="1">
    <thead>
    <tr>
    <th scope="col">Поле 1</th>
    <th scope="col">Поле 2</th>
    <th scope="col">Поле 3</th>
    <th scope="col">Поле 4</th>
    </tr>
    </thead>
    
    <tbody id="dynamic"></tbody>
    </table>
    
    <script>
    function getTr () {
    var tr = document.createElement('tr');
    
    var html = [
    '<td>',
    '<input type="text">',
    '</td>',
    '<td>',
    '<input type="text">',
    '</td>',
    '<td>',
    '<input type="text">',
    '</td>',
    '<td>',
    '<input type="text">',
    '</td>'].join('');
    
    tr.innerHTML = html;
    return tr;
    }
    
    
    var tb = document.querySelector('#dynamic')
    function change (v) {
    console.log(v);
    
    if (v == 0) {
    Array.prototype.forEach.call(tb.children, function (tr) {
    tr.style.display = 'none';
    });
    } else {
    for (var i = 0; i < v; i++) {
    tb.appendChild(getTr());
    }
    }
    }
    </script>
    </body>
    Во вложении образец как должно работать, (это я делал в LiveCycle FormDesigner), хотелось бы подобное в HTML.
     

    Вложения:

Загрузка...

Поделиться этой страницей