Добавление строк в таблицу и скрытие таблицы.
Необходимо доработать код так, чтобы все работало от одного (верхнего) выпадающего списка. Если выбрать "Без ограничений", то таблица скрылась, если иначе, то добавлялось, указанное количество строк. Помогите новичку.
<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>
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
<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>
|
Цитата:
|
Цитата:
|
Цитата:
|
Прошу строго не судить, я всего пару недель как осваиваю HTML и JS.
По отдельности оба выпадающих списка работают вроде правильно. Однако, надо чтобы выпадающий список был один (верхний) и выполнял он оба действия скрытие таблицы, если выбрано "Без ограничений", и добавление строк, согласно выбранному количеству. |
Цитата:
|
<html>
<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>
</html>
|
Спасибо за ответ, но строки-то добавляются, это и мой (ну не мой, если честно, а найденный в инете) скрипт делает, а вот таблица (с ее заголовоком) при выборе "Без ограничений" не скрывается.
В LiveCycle FormDesigner я делаю так:
<event activity="exit" name="event__exit">
<script contentType="application/x-javascript">Table3.Row1.instanceManager.setInstances(К_воВод.rawValue);
this.resolveNode("Table3").presence = "visible";
</script>
</event>
<event activity="change" name="event__change">
<script contentType="application/x-javascript">if ($.boundItem(xfa.event.newText) == "Без ограничений") {
this.resolveNode("Table3").presence = "hidden";
}
</script>
</event>
и все классно работает, а вот в HTML у меня не получается. |
ну дак, найдите вашу таблицу
var table = document.querySelector('table'); и скройте ее table.style.visibility = 'hidden'; |
Да дайте человеку конкретный рабочий код, который он просит. Видно же , что человек слабо знает эту тему, в инете может не один час искал и не нашел. Может он простой пользователь и ему это понадобится один раз в жизни. Надо то вставить в код наверное всего пару строк и дело с концом. Если бы я мог, то без проблем помог. Всем всего наилучшего.
|
III, вот тебе правильное решение. Я хотя и не спец, но проблему твою решил. Пользуйся на здоровье.
<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="4">4</option>
<option value="6">6</option>
<option value="10">10</option>
</select>
</caption>
<p><p/>
<form id= Tablica 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));
}
if (numRows == 0) {
htmlTBody.parentNode.style.display = "none";
} else {
htmlTBody.parentNode.style.display = "";
}
};
}
</script>
</body>
|
Цитата:
Не так это делается. Заводится 1 поле на 1 ячейку (кажется у вас на этом и кончается) которые тупо подсовываются в активную строку и используются тупо как таковые, ну, как input'ы. Данные с которых тупо валятся в обычный {} из которого по субмиту валятся то самое поле после JSON' и уходят таким макром на сервер, а там json_decode() и вперде. |
Проблему представляют кнопки file, вот их да, придется размножать.
|
Человек пишет:"Прошу строго не судить, я всего пару недель как осваиваю HTML и JS." Ему, я так понимаю, надо просто подсказать что, как и где писать в коде, а вы про сервер толкуете. Да он просто на простой странице хочет понять что к чему.
|
Не гоните пургу, эту преамбулу паяют все кому западло признаться в невежестве.
Так вот начинающие 2 недели пишут return "Hello World" а не datagrid рисуют. |
Цитата:
|
Цитата:
|
Прошу Вас помочь в следующем вопросе. Необходимо чтобы после добавления строк в таблицу, не изменялся установленный ранее размер ширины ячеек.
<!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>
Я этих делах ноль, но надо. Заранее благодарю. |
Цитата:
Цитата:
|
Огромное спасибо за помощь! Но есть неприятность в моем коде. Код несколько другой, чем предыдущий. Все работает нормально, но у меня, что-то не получается изменить размеры поля (не самой отрисовки таблицы, именно поля, где вводятся данные) в крайне правой колонке таблицы. Привожу, имеющийся у меня, код.
<!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,
<link rel='stylesheet' type='text/css' href='print.css' media='print'>
/* файл print.css */
#rows_setup {display:none}
|
III, или в css
@media print{
#rows_setup {display:none}
}
|
Спасибо, я разобрался со скрытием элемента. Может подскажите в этой таблице можно сделать автоподсчет итогов по столбцам. Примерно как в excel. Допустим в каком-то столбце в ячейках проставляются числа, а в самом низу, итоговая сумма по столбцу.
|
III,
для начала вам нужно этот низ придумать :) |
Это что типа такого ?
<TABLE>
<CAPTION>Заголовок Таблицы</CAPTION>
<THEAD>
<TR>
<TH>Заголовок 1</TH>
<TH>Заголовок 2</TH>
<TH>Заголовок 3</TH>
<TH>Заголовок 4</TH>
<TH>Заголовок 5</TH>
</TR></THEAD>
<TBODY>
<TR>
<TD ROWSPAN="2">Ячейка (1,1+2,1)</TD>
<TD ROWSPAN="2">Ячейка (1,2+2,2)</TD>
<TD ROWSPAN="2">Ячейка (1,3+2,3)</TD>
<TD ROWSPAN="2">Ячейка (1,4+2,4)</TD>
<TD>Ячейка 1,5</TD>
</TR>
<TR>
<TD>Ячейка 2,5</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD COLSPAN=”4”>Итог 1+ Итог 2+ Итог 3+ Итог 4</TD>
<TD>Итог 5</TD>
</TR>
</TFOOT>
</TABLE>
|
III,
алгоритм то придумайте -- добавление строк , что делаем , когда строка вывода появляется исчезает или постоянно есть, в какой момент подсчёт по вводу и кнопкой сосчитать, что считать (у вас непонятно стало) пока этой информации нет. пост 32 с чёткой постановкой задачи, превратился в сплошную загадку после образца таблицы. :-? |
Я думал, что эта конструкция
<TFOOT> <TR> <TD </TD> </TR> </TFOOT> добавляет строку ИТОГОВ в таблицу, но оказывается нет. Я в FormDesigner (там формат файла pdf) делал тоже самое. В таблице есть заголовок, строки и итоговая строка, а расчет в с итога проиcходит без кнопки, путем JS, убираю фокус с поля ввода и пересчитывается значение в итоговом поле. Здесь все как-то проблематично. Просто я хотел этот документ в pdf сделать в HTML, но видно не судьба. Спасибо за помощь. Мой документ в pdf прикреплен. |
III,
пока я перестал понимать вас даже pdf не осилил как посмотреть. |
Попробовал скачал свой pdf и reader(ом) открыл, все работает.
|
III,
видимо не судьба так на всякий случай http://javascript.ru/forum/css-html/...tml#post348764 http://javascript.ru/forum/dom-windo...zu-vverkh.html |
Всем спасибо. Тему закрываем.
|
| Часовой пояс GMT +3, время: 19:55. |