Javascript-форум - Добавление строк в таблицу и скрытие таблицы.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Добавление строк в таблицу и скрытие таблицы. (https://javascript.ru/forum/misc/51020-dobavlenie-strok-v-tablicu-i-skrytie-tablicy.html)

Цитата:

<p><strong>Динамическая таблица.</strong></p>

Динамическая, редактируемая таблица это datagrid control. Вот так выглядит в готовом виде, например http://dhtmlx.com/docs/products/dhtmlxGrid/

Цитата:

Сообщение от kostyanet (Сообщение 336989)

Не гоните пургу, эту преамбулу паяют все кому западло признаться в невежестве.

Ну а я тут при чем, что он так пишет? Возможно, а это скорее всего так, что он нашел код динамической таблицы в инете, решил применить его где-то, а в этом где-то таблицу над скрывать на каком-то этапе, вот он и просит помощи. А по поводу г-но кода, так это не ко мне, а к тому кто писал. Если у вас есть лучший вариант, представьте его. Что мешает. Все будут только благодарны вам. Посмотрите за сутки более ста просмотров, значит это многих интересует. С наилучшими пожеланиями. Ждем ваш образцовый вариант решения по динамической таблице с условиями поставленными III.

Прошу Вас помочь в следующем вопросе. Необходимо чтобы после добавления строк в таблицу, не изменялся установленный ранее размер ширины ячеек.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <meta charset="UTF-8">
 </head>
<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="5">5</option>
	<option value="6">6</option>
</select>

<table border="1">
	<thead>
		<tr>
			<th width=50 scope="col">Поле 1</th>
			<th width=100 scope="col">Поле 2</th>
			<th width=300 scope="col">Поле 3</th>
			<th width=50 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>

</html>

Я этих делах ноль, но надо.
Заранее благодарю.

Цитата:

Сообщение от III

Необходимо чтобы после добавления строк в таблицу, не изменялся установленный ранее размер ширины ячеек.

Возможно тебе поможет css-свойство table-layout и его значение

Цитата:

fixed
Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

http://htmlbook.ru/css/table-layout

Огромное спасибо за помощь! Но есть неприятность в моем коде. Код несколько другой, чем предыдущий. Все работает нормально, но у меня, что-то не получается изменить размеры поля (не самой отрисовки таблицы, именно поля, где вводятся данные) в крайне правой колонке таблицы. Привожу, имеющийся у меня, код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <meta charset="UTF-8">
  <style>
   table {
    table-layout: fixed; /* Фиксированная ширина ячеек */
    width: 430px; /* Ширина таблицы */
   }
   .col1 { width: 50px;}
   .col2 { width: 100px;}
   .col3 { width: 80px;}
   .col4 { width: 200px;}
  </style>
 </head>
<body>
 <p><strong>Динамическая таблица.</strong></p>
                <caption>
                    <!-- Кол-во элементов option и их значения value можно задать произвольно //-->
                    <select id="rows_setup">
                        <option value="0">--Установить кол-во строк--</option>
                        <option value="0">Скрыть таблицу</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </caption>       
 <p><p/>   
 <form id= Tablica method="post" action="">
            <table  width="430px" border="1" cellspacing="0" cellpadding="0">
                <!-- Заголовки //-->             
                <thead>
                    <tr>
            <th width=50px scope="col">Поле 1</th>
			<th width=100px scope="col">Поле 2</th>
			<th width=80px scope="col">Поле 3</th>
			<th width=200px 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));
        }
        if (numRows == 0) {
htmlTBody.parentNode.style.display = "none";
} else {
htmlTBody.parentNode.style.display = "";
}
    };
}  
    </script>
    </body>

Цитата:

но у меня, что-то не получается изменить размеры поля (не самой отрисовки таблицы, именно поля, где вводятся данные) в крайне правой колонке таблицы. Привожу, имеющийся у меня, код.

Проверил, но не только правой колонки, а вех колонок.

Остановился вот на таком варианте:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <meta charset="UTF-8">
  <style>
   table input{
    display:block;
    width:98.8%;}  
  </style>
 </head>
<body>
 <p><strong>Динамическая таблица.</strong></p>
                <caption>
                    <!-- Кол-во элементов option и их значения value можно задать произвольно //-->
                    <select id="rows_setup">
                        <option value="0">--Установить кол-во строк--</option>
                        <option value="0">Скрыть таблицу</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </caption>
 <p><p/>   
 <form id= Tablica method="post" action="">
            <table  width="600px" border="1" cellspacing="0" cellpadding="4">
                <!-- Заголовки //-->             
                <thead>
                    <tr>
            <th width=20px scope="col">Поле 1</th>
			<th width=300px scope="col">Поле 2</th>
			<th width=80px scope="col">Поле 3</th>
			<th width=100px 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));
        }
        if (numRows == 0) {
htmlTBody.parentNode.style.display = "none";
} else {
htmlTBody.parentNode.style.display = "";
}
    };
}  
    </script>
    </body>

Единственное, что еще надо, это чтобы select не выводился на печать, а только на экран и организовать автонумерацию при добавлении или удалении строк. Может кто поможет ?

С автонумерацией вопрос решен, скрипт нашел на этом форуме СПАСИБО участнику форума РОНИ. Осталось чтобы select на печать не выводился. Спецы жду помощи.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <meta charset="UTF-8">
  <style>
   table input{
    display:block;
    width:98.8%;}
  </style>
 </head>
<body>
 <p><strong>Динамическая таблица.</strong></p>
                <caption>
                    <!-- Кол-во элементов option и их значения value можно задать произвольно //-->
                    <select id="rows_setup" >
                        <option value="0">--Установить кол-во строк--</option>
                        <option value="0">Скрыть таблицу</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </caption>
 <p><p/>  
 <form id= Tablica method="post" action="">
            <table table id="tab" width="600px" border="1" cellspacing="0" cellpadding="4">
                <!-- Заголовки //-->             
                <thead>
                    <tr>
            <th width=20px scope="col">Поле 1</th>
			<th width=300px scope="col">Поле 2</th>
			<th width=80px scope="col">Поле 3</th>
			<th width=100px 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));
        }
       /* Нумерация */
	var table1 = document.getElementById('tab'),
        rows1 = table1.rows,
        text1 = 'textContent' in document ? 'textContent' : 'innerText';
        for (var i1 = 1; i1 < rows1.length; i1++) {
            rows1[i1].cells[0][text1] = i1 + rows1[i1].cells[0][text1];
        }	
        if (numRows == 0) {
htmlTBody.parentNode.style.display = "none";
} else {
htmlTBody.parentNode.style.display = "";
}
    };
}  
    </script>
    </body>

III,

Цитата:

Сообщение от III

+ rows1[i1].cells[0][text1];

это зачем?

III,

<link rel='stylesheet' type='text/css' href='print.css' media='print'>

/* файл print.css */
#rows_setup {display:none}