Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.10.2014, 10:02
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Добавление строк в таблицу и скрытие таблицы.
Необходимо доработать код так, чтобы все работало от одного (верхнего) выпадающего списка. Если выбрать "Без ограничений", то таблица скрылась, если иначе, то добавлялось, указанное количество строк. Помогите новичку.
<body>
<p><strong>Динамическая таблица.</strong></p>
  <!-- Кол-во элементов option и их значения value можно задать произвольно //-->
    <select id="rows_setup">
        <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>
  <p><p/>
 <div id="Tablica" style="display: show;">
 <form method="post" action="">
            <table width="650" border="1" cellspacing="0" cellpadding="5">
                <!-- Заголовки //-->
                <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>
            
        </form>
        <script>
            /* Навешиваем логику: */
            setupTable(
                "dynamic", /* ID элемента <tbody> таблицы */
                "rows_setup", /* ID элемента <select> для установки кол-ва строк */
                {1:"val1", 2:"val2", 3:"val3", 4:"val4"} /* Конфигурация строки таблицы */
            );
			
function setupTable(tableId, selectId, fields) {
    var htmlTBody   = document.getElementById(tableId),
        htmlSelect  = document.getElementById(selectId),
        rowTpl      = document.createElement("TR");
    /* Строим шаблон строки таблицы один раз, в дальнейшем будем просто его клонировать */
    for(var field in fields) {
        if (false === fields.hasOwnProperty(field)) continue;
        var TD = document.createElement("TD"),
            INPUT = document.createElement("INPUT");
        INPUT.name = fields[field] + "[]";
        TD.appendChild(INPUT);
        rowTpl.appendChild(TD);
    }
    // Вешаем обработчик на элемент управления кол-вом строк
    htmlSelect.onchange = function (e) {
        var numRows = htmlSelect.options[htmlSelect.selectedIndex].value;
        /* Отслеживаем отрицательные значения а то мало ли какие там значения в option понаставят */
        numRows = numRows < 0 ? 0 : numRows;
        /* Удаляем те строки которые есть. */
        while(htmlTBody.firstChild) htmlTBody.removeChild(htmlTBody.firstChild);
        for (var i = 0; i < numRows; i++) {	
			htmlTBody.appendChild(rowTpl.cloneNode(true));
        }
    };
}				
			
        </script>
</script>
</div>
<p><p/>
<select NAME="TEST" onchange ="myselection()">
<option selected >Скрыть
<option selected >1
<option selected >2
<option selected >3
<option selected >6
<SCRIPT>
function myselection() {
var testnumber;
testnumber=document.all.TEST.selectedIndex
if (testnumber==0)
Tablica.style.display = "none"
else{
Tablica.style.display = "inline";
}
}
</SCRIPT>
</body>
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2014, 10:23
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от III
Добавление строк в таблицу
Дык!
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2014, 10:31
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Сообщение от ksa Посмотреть сообщение
Дык!
Уже было.
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2014, 10:34
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от III
Уже было.
И чего тебе в том не хватило?
Ответить с цитированием
  #5 (permalink)  
Старый 21.10.2014, 10:40
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от III
htmlSelect.options[htmlSelect.selectedIndex].value
А htmlSelect.value - не проще будет?
Сообщение от III
numRows = numRows < 0 ? 0 : numRows;
Фак.. numRows = Math.max(0, numRows);
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 21.10.2014, 10:56
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

<html>
<body>
<table border="1">
	<tbody id="dynamic"></tbody>
</table>
<input type="button" value="add">
<script>
document.querySelector('input[type=button]').onclick  = function () {
	var tr = document.createElement('tr');
	tr.innerHTML = '<td>1</td><td>2</td><td>3</td><td>4</td>';
	document.querySelector('#dynamic').appendChild(tr);
}
</script>
</body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 21.10.2014, 10:59
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от III
<option selected >Скрыть
<option selected >1
<option selected >2
<option selected >3
<option selected >6
У тебя же не мультиселект. Так какого хрена все опшны помечены как selected?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 21.10.2014, 11:00
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Сообщение от ksa Посмотреть сообщение
И чего тебе в том не хватило?
Я так понимаю, что того же чего и тебе. Иначе я бы сюда не обращался, а ты, если конечно спец, дал бы правильный ответ.
Ответить с цитированием
  #9 (permalink)  
Старый 21.10.2014, 11:09
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от III
если конечно спец, дал бы правильный ответ
Тебе конечно видней как должны вести себя спецы...
Ответить с цитированием
  #10 (permalink)  
Старый 21.10.2014, 12:01
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Прошу строго не судить, я всего пару недель как осваиваю HTML и JS.
По отдельности оба выпадающих списка работают вроде правильно. Однако, надо чтобы выпадающий список был один (верхний) и выполнял он оба действия скрытие таблицы, если выбрано "Без ограничений", и добавление строк, согласно выбранному количеству.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление нескольких строк в таблицу CRYSIS_STALKER Общие вопросы Javascript 6 24.07.2014 22:03
Добавление строк в таблицу ded711 Общие вопросы Javascript 8 25.04.2014 08:23
Добавление строк в таблицу ded711 Общие вопросы Javascript 1 30.03.2014 16:52
Добавление строк в таблицу (JQuery) tiksi jQuery 2 16.05.2013 08:01
Добавление строк в таблицу stanlee Элементы интерфейса 13 11.06.2008 17:38