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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем bsi, 21 окт 2014.

  1. bsi

    bsi New Member

    Регистрация:
    1 июн 2013
    Сообщения:
    3
    Симпатии:
    0
    Прошу помочь модифицировать представленный код так, чтобы при выборе в выпадающем списке "Без ограничений" таблица (с заголовком) была скрыта, при других вариантах вновь появлялась на экране и добавлялось бы указанное к-во строк. Всем ответившим, спасибо.
    Код (Text):
    <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.
     

    Вложения:

Загрузка...
Похожие Темы - Скрытие Отображение Таблицы
  1. bsi
    Ответов:
    0
    Просмотров:
    849
  2. Dragon108
    Ответов:
    1
    Просмотров:
    1.204
  3. cLif
    Ответов:
    5
    Просмотров:
    2.152
  4. maks00793
    Ответов:
    6
    Просмотров:
    1.965
  5. hosm
    Ответов:
    0
    Просмотров:
    1.593

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